From 4c7401b54b2111f1e8843d50dadf1b50a7417a84 Mon Sep 17 00:00:00 2001 From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com> Date: Fri, 2 Oct 2026 22:22:37 +0530 Subject: [PATCH 1/6] feat: implement phase 1 of mobile responsiveness - Add box-sizing and overflow-x: hidden to global.css and App layout shell - Implement hamburger menu toggle in Navbar for mobile screens - Make Support Us button always visible on mobile - Add fallback empty state message in mobile dropdown when no data is loaded --- src/App.jsx | 2 +- src/components/Navbar.jsx | 167 +++++++++++++++++++++++++------------- src/styles/global.css | 5 ++ 3 files changed, 118 insertions(+), 56 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 56d854d2..e9bdc0be 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,7 +19,7 @@ import RequireAnalysis from './components/RequireAnalysis' function Layout({ children }) { return ( -
+
{children}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index bdafb79e..7f08a2d4 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,6 +1,6 @@ -import React from 'react' +import React, { useState } from 'react' import { NavLink, useNavigate } from 'react-router-dom' -import { FiHeart, FiSettings, FiZap } from 'react-icons/fi' +import { FiHeart, FiSettings, FiZap, FiMenu, FiX } from 'react-icons/fi' import { useApp } from '../context/AppContext' import ThemeToggle from './ThemeToggle' import Logo from "../assets/og-logo.svg?react"; @@ -21,6 +21,19 @@ export default function Navbar() { const navigate = useNavigate() const hasData = orgs.length > 0 const lowLimit = rateLimit && rateLimit.remaining < 15 + const [menuOpen, setMenuOpen] = useState(false) + + const navLinkStyle = ({ isActive }) => ({ + display: 'block', + padding: '6px 10px', + fontSize: 13, + whiteSpace: 'nowrap', + textDecoration: 'none', + fontWeight: isActive ? 600 : 400, + color: isActive ? 'var(--accent)' : 'var(--text2)', + borderBottom: isActive ? '2px solid var(--accent)' : '2px solid transparent', + transition: 'color 0.2s ease', + }) return ( ) } diff --git a/src/styles/global.css b/src/styles/global.css index d6f6d516..9ce9d539 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -35,8 +35,13 @@ --radius: 8px; } +*, *::before, *::after { + box-sizing: border-box; +} + html, body, #root { min-height: 100%; + overflow-x: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; From c4d5b1b1a8758090040964df078880f08b1f8a7e Mon Sep 17 00:00:00 2001 From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com> Date: Fri, 2 Oct 2026 22:52:51 +0530 Subject: [PATCH 2/6] fix(navbar): hide mobile menu toggle button on desktop viewports --- src/components/Navbar.jsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 7f08a2d4..5686f254 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -90,12 +90,12 @@ export default function Navbar() { Support Us - {/* Hamburger — only on mobile */} + {/* Hamburger / Menu toggle — only on mobile */}
- {/* Mobile dropdown menu — only on mobile */} + {/* Mobile dropdown menu & backdrop — only on mobile */} {menuOpen && ( -
- {hasData ? LINKS.map(({ to, label }) => ( - ({ - padding: '10px 4px', - fontSize: 14, - textDecoration: 'none', - fontWeight: isActive ? 600 : 400, - color: isActive ? 'var(--accent)' : 'var(--text)', - borderBottom: '1px solid var(--border)', - })} - onClick={() => setMenuOpen(false)} - > - {label} - - )) : ( -
- Load an organisation to explore pages. -
- )} - {/* Rate limit in mobile menu */} - {rateLimit && ( -
- - API: {rateLimit.remaining.toLocaleString()} / {rateLimit.limit.toLocaleString()} remaining -
- )} -
+ <> +
setMenuOpen(false)} + /> +
+ {hasData ? LINKS.map(({ to, label }) => ( + ({ + padding: '10px 4px', + fontSize: 14, + textDecoration: 'none', + fontWeight: isActive ? 600 : 400, + color: isActive ? 'var(--accent)' : 'var(--text)', + borderBottom: '1px solid var(--border)', + })} + onClick={() => setMenuOpen(false)} + > + {label} + + )) : ( +
+ Load an organisation to explore pages. +
+ )} + {/* Rate limit in mobile menu */} + {rateLimit && ( +
+ + API: {rateLimit.remaining.toLocaleString()} / {rateLimit.limit.toLocaleString()} remaining +
+ )} +
+ )} ) diff --git a/src/styles/global.css b/src/styles/global.css index 9ce9d539..178388fc 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -41,7 +41,6 @@ html, body, #root { min-height: 100%; - overflow-x: hidden; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; From df6222f25e24fb5e75a1975b1809a26aea3284b0 Mon Sep 17 00:00:00 2001 From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com> Date: Fri, 2 Oct 2026 23:46:56 +0530 Subject: [PATCH 4/6] fix(navbar): resolve backdrop stacking context, 320px responsive header spacing, and ARIA keyboard support --- src/components/Navbar.jsx | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index bb9624b0..2f9bb75b 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useState, useEffect } from 'react' import { NavLink, useNavigate } from 'react-router-dom' import { FiHeart, FiSettings, FiZap, FiMenu, FiX } from 'react-icons/fi' import { useApp } from '../context/AppContext' @@ -23,6 +23,19 @@ export default function Navbar() { const lowLimit = rateLimit && rateLimit.remaining < 15 const [menuOpen, setMenuOpen] = useState(false) + // Keyboard Escape key dismissal for mobile navigation + useEffect(() => { + const handleKeyDown = (e) => { + if (e.key === 'Escape') { + setMenuOpen(false); + } + }; + if (menuOpen) { + window.addEventListener('keydown', handleKeyDown); + } + return () => window.removeEventListener('keydown', handleKeyDown); + }, [menuOpen]); + const navLinkStyle = ({ isActive }) => ({ display: 'block', padding: '6px 10px', @@ -39,22 +52,20 @@ export default function Navbar() {