ilia/mirror_match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Improve navigation component styling and functionality
Some checks failed
CI / skip-ci-check (pull_request) Successful in 1m20s
Details
CI / lint-and-type-check (pull_request) Failing after 1m41s
Details
CI / test (pull_request) Successful in 1m46s
Details
CI / build (pull_request) Failing after 1m46s
Details
CI / secret-scanning (pull_request) Successful in 1m20s
Details
CI / dependency-scan (pull_request) Successful in 1m25s
Details
CI / sast-scan (pull_request) Successful in 2m21s
Details
CI / workflow-summary (pull_request) Successful in 1m18s
Details

Browse Source 
- Add relative positioning to navigation elements for better stacking context
- Ensure side menu closes when navigating to Upload and Leaderboard links
- Adjust z-index values for side menu and overlay to improve layering
This commit is contained in:
ilia 2026-01-02 15:33:39 -05:00
parent f4461b277c
commit 21fc9f33fb
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/Navigation.tsx
View File

@ -29,14 +29,14 @@ export default function Navigation() {
return ( return (
<> <>
<nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg"> <nav className="sticky top-0 z-50 bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-16"> <div className="flex justify-between items-center h-16">
{/* Logo and Menu Button */} {/* Logo and Menu Button */}
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<button <button
onClick={() => setSideMenuOpen(!sideMenuOpen)} onClick={() => setSideMenuOpen(!sideMenuOpen)}
className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white" className="menu-button p-2 rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-white relative z-10"
aria-label="Toggle menu" aria-label="Toggle menu"
> >
<svg <svg
@ -51,29 +51,31 @@ export default function Navigation() {
<path d="M4 6h16M4 12h16M4 18h16" /> <path d="M4 6h16M4 12h16M4 18h16" />
</svg> </svg>
</button> </button>
<Link href="/" className="text-xl font-bold"> <Link href="/" className="text-xl font-bold relative z-10">
MirrorMatch MirrorMatch
</Link> </Link>
</div> </div>
{/* Main Actions - Always Visible */} {/* Main Actions - Always Visible */}
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4 relative z-10">
<Link <Link
href="/upload" href="/upload"
className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap" className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
onClick={() => setSideMenuOpen(false)}
> >
Upload Upload
</Link> </Link>
<Link <Link
href="/leaderboard" href="/leaderboard"
className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap" className="hover:bg-purple-700 px-3 py-2 rounded-md text-sm font-medium transition whitespace-nowrap relative z-10"
onClick={() => setSideMenuOpen(false)}
> >
Leaderboard Leaderboard
</Link> </Link>
</div> </div>
{/* User Info */} {/* User Info */}
<div className="flex items-center"> <div className="flex items-center relative z-10">
<span className="text-sm">Hello, {session.user.name}</span> <span className="text-sm">Hello, {session.user.name}</span>
</div> </div>
</div> </div>
@ -82,7 +84,7 @@ export default function Navigation() {
{/* Side Menu */} {/* Side Menu */}
<div <div
className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out flex flex-col ${ className={`side-menu fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-white shadow-xl z-30 transform transition-transform duration-300 ease-in-out flex flex-col ${
sideMenuOpen ? "translate-x-0" : "-translate-x-full" sideMenuOpen ? "translate-x-0" : "-translate-x-full"
}`} }`}
> >
@ -154,7 +156,7 @@ export default function Navigation() {
{/* Overlay for mobile */} {/* Overlay for mobile */}
{sideMenuOpen && ( {sideMenuOpen && (
<div <div
className="fixed inset-0 bg-black bg-opacity-50 z-30 sm:hidden" className="fixed inset-0 bg-black bg-opacity-50 z-20 sm:hidden"
onClick={() => setSideMenuOpen(false)} onClick={() => setSideMenuOpen(false)}
/> />
)} )}