From a507799b804805a4f3ead34bdb68c3d6cdaa7eb9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 11 Jun 2026 01:07:00 +0000
Subject: [PATCH] Fix mobile admin nav bar hidden behind main navbar

- Reposition admin mobile bar from top-0/z-10 to top-16/z-40 so it
  sits below the main Navbar instead of behind it
- Make Sheet controlled so the drawer closes when a nav link is tapped
- Pass onNavigate callback to AdminNavLinks to close Sheet on navigation

https://claude.ai/code/session_01F7rJW6gpaXMiSF3wQYrmhC
---
 app/routes/admin.tsx | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/routes/admin.tsx b/app/routes/admin.tsx
index 3cef405..16df021 100644
--- a/app/routes/admin.tsx
+++ b/app/routes/admin.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Link, Outlet, redirect } from "react-router";
 import { auth } from "~/lib/auth.server";
 import type { Route } from "./+types/admin";
@@ -44,59 +45,59 @@ export async function loader(args: Route.LoaderArgs) {
   return { isAdmin };
 }
 
-function AdminNavLinks() {
+function AdminNavLinks({ onNavigate }: { onNavigate?: () => void }) {
   return (
     <>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin">
           <LayoutDashboard className="mr-2 h-4 w-4" />
           Dashboard
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/leagues">
           <Shield className="mr-2 h-4 w-4" />
           Leagues
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/sports">
           <Trophy className="mr-2 h-4 w-4" />
           Sports
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/sports-seasons">
           <Calendar className="mr-2 h-4 w-4" />
           Sports Seasons
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/simulators">
           <Activity className="mr-2 h-4 w-4" />
           Simulators
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/tournaments">
           <Award className="mr-2 h-4 w-4" />
           Tournaments
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/templates">
           <FolderKanban className="mr-2 h-4 w-4" />
           Season Templates
         </Link>
       </Button>
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/users">
           <Users className="mr-2 h-4 w-4" />
           Users
         </Link>
       </Button>
       <div className="border-t my-2" />
-      <Button variant="ghost" className="w-full justify-start" asChild>
+      <Button variant="ghost" className="w-full justify-start" asChild onClick={onNavigate}>
         <Link to="/admin/data-sync">
           <RefreshCw className="mr-2 h-4 w-4" />
           Data Sync
@@ -107,11 +108,12 @@ function AdminNavLinks() {
 }
 
 export default function AdminLayout() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   return (
     <div className="flex min-h-screen">
       {/* Mobile top bar */}
-      <div className="md:hidden fixed top-0 left-0 right-0 z-10 flex h-14 items-center border-b px-4 gap-3 bg-muted/40">
-        <Sheet>
+      <div className="md:hidden fixed top-16 left-0 right-0 z-40 flex h-14 items-center border-b px-4 gap-3 bg-muted/40">
+        <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
           <SheetTrigger asChild>
             <Button variant="ghost" size="icon" className="shrink-0">
               <Menu className="h-5 w-5" />
@@ -123,7 +125,7 @@ export default function AdminLayout() {
               <SheetTitle>Admin Panel</SheetTitle>
             </SheetHeader>
             <nav aria-label="Admin navigation" className="space-y-1 p-4">
-              <AdminNavLinks />
+              <AdminNavLinks onNavigate={() => setMobileMenuOpen(false)} />
             </nav>
           </SheetContent>
         </Sheet>
-- 
2.45.3