mobile fix #86

Merged
chrisp merged 1 commit from claude/mobile-admin-menu-sections-oy0ue8 into main 2026-06-11 01:48:06 +00:00

View file

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