Skip to content

fix: refine mega menu layout and spacing #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Harkiratcodess wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: refine mega menu layout and spacing #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b6fd110
fix: refine mega menu layout and spacing
Harkiratcodess May 14, 2026
c7833da
fix: keyboard accessibility and aria-hidden for mega menu
Harkiratcodess May 14, 2026
c808dd7
fix: remove GSSoC branding, reduce mega menu size and padding
Harkiratcodess May 15, 2026
f17ea42
fix : remove footer strip comment
Harkiratcodess May 15, 2026
a2d532e
Merge branch 'main' into fix/mega-menu-refinement
Harkiratcodess May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import GitHubIntelligencePage from "./pages/GitHubIntelligencePage";
import GitHubCallbackPage from "./pages/GitHubCallbackPage";
import ProtectedRoute from "./components/shared/ProtectedRoute";
import PublicRoute from "./components/shared/PublicRoute";


import FAQSection from "./components/explore/FAQSection";
export default function App() {
return (
Expand Down Expand Up @@ -102,7 +104,10 @@ export default function App() {
<Route path="/terms" element={<TermsPage/>} />
<Route path="/privacy" element={<PrivacyPage/>} />
<Route path="*" element={<NotFoundPage />} />

</Routes>


</MainLayout>
</BrowserRouter>
</AuthProvider>
Expand Down
110 changes: 85 additions & 25 deletions frontend/src/components/shared/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,30 @@ export default function Navbar() {
</button>

{/* ── Mega Menu Panel ── */}
<div
ref={megaRef}
onMouseEnter={handleMegaMouseEnter}
onMouseLeave={handleMegaMouseLeave}
aria-hidden={!megaOpen}
className={`absolute top-full left-1/2 mt-4 w-[580px] bg-white border-4 border-black z-50 transition-all duration-200 origin-top ${
megaOpen
? "opacity-100 translate-y-0 scale-100 visible"
: "opacity-0 -translate-y-2 scale-95 invisible"
}`}
style={{ transform: "translateX(-50%)" }}
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
{/* Top accent bar */}
<div className="h-1 w-full bg-black" />

<div className="p-3">


<div className="grid grid-cols-2 gap-[2px] bg-black border-2 border-black overflow-hidden">
{MEGA_MENU_ITEMS.map((item, i) => {
const Wrapper = item.to ? Link : "button";
const hasSubmenu = item.submenu && item.submenu.length > 0;

if (hasSubmenu) {
{megaOpen && (
<div
id="tools-mega-menu"
Expand Down Expand Up @@ -299,14 +323,17 @@ export default function Navbar() {
}

return (
<Wrapper
<div
key={item.label}
to={item.to}
onClick={closeMenu}
className={`group text-left p-4 border-black transition-colors duration-150 hover:bg-black hover:text-white ${
i % 2 === 0 ? "border-r-2" : ""
} ${i < MEGA_MENU_ITEMS.length - 2 ? "border-b-2" : ""}`}
className="col-span-2 bg-white"
>
<div className="p-3 bg-black text-white flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm">{item.icon}</span>
<span className="text-xs font-black uppercase tracking-widest">
{item.label}
</span>
</div>
<div className="flex items-center gap-2 mb-1">
<span className="text-base font-black leading-none">
{item.icon}
Expand All @@ -315,31 +342,64 @@ export default function Navbar() {
{item.label}
</span>
{item.tag && (
<span className="text-[9px] font-black tracking-widest border-2 border-current px-[5px] py-[1px] leading-tight">
<span className="text-[8px] font-black tracking-widest border border-white px-1.5 py-0.5">
{item.tag}
</span>
)}
</div>
<p className="text-xs font-bold tracking-wide leading-snug opacity-60 group-hover:opacity-80 pl-6">
{item.desc}
</p>
</Wrapper>
<div className="grid grid-cols-2 gap-[2px] bg-black">
{item.submenu.map((subItem) => (
<Link
key={subItem.label}
to={subItem.to}
onClick={closeMenu}
className="group flex flex-col p-3 bg-white hover:bg-gray-50 transition-colors"
>
<div className="flex items-center gap-2 mb-0.5">
<span className="text-xs group-hover:scale-110 transition-transform">{subItem.icon}</span>
<span className="text-[11px] font-black uppercase tracking-wider group-hover:underline decoration-2">
{subItem.label}
</span>
</div>
<p className="text-[10px] font-bold text-gray-500 pl-5 leading-tight">
{subItem.desc}
</p>
</Link>
))}
</div>
</div>
);
})}
</div>

{/* Footer strip */}
<div className="mt-4 pt-3 border-t-2 border-black flex items-center justify-between">
<span className="text-[10px] font-black uppercase tracking-[0.15em] text-gray-500">
More tools shipping soon
</span>
<span className="text-[10px] font-black uppercase tracking-widest border-b-2 border-black hover:opacity-60 cursor-pointer">
View All →
</span>
</div>
}

return (
<Wrapper
key={item.label}
to={item.to}
onClick={closeMenu}
className="group flex flex-col p-4 bg-white hover:bg-black hover:text-white transition-all duration-150"
>
<div className="flex items-center gap-2 mb-1">
<span className="text-lg group-hover:scale-110 transition-transform">{item.icon}</span>
<span className="text-xs font-black uppercase tracking-widest">
{item.label}
</span>
{item.tag && (
<span className="text-[8px] font-black tracking-widest border-2 border-current px-1.5 py-0.5">
{item.tag}
</span>
)}
</div>
<p className="text-[10px] font-bold opacity-60 group-hover:opacity-100 pl-6 leading-relaxed">
{item.desc}
</p>
</Wrapper>
);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
})}
</div>


</div>
)}
</div>
</div>
</div>

Expand Down Expand Up @@ -569,7 +629,7 @@ export default function Navbar() {
return (
<Wrapper
key={item.label}
to={item.to}
{...(item.to ? { to: item.to } : { type: "button" })}
onClick={closeMenu}
className="w-full text-left px-8 py-3 border-b border-black/10 hover:bg-black hover:text-white transition-colors duration-150 group"
>
Expand Down