Refactor AdminHeader for mobile

src/components/layout/AdminHeader.tsx

@@ -1,4 +1,4 @@
-import { Shield, ArrowLeft, Settings, RefreshCw } from 'lucide-react';
+import { Shield, ArrowLeft, Settings, RefreshCw, Menu } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Link, useLocation } from 'react-router-dom';
 import { ThemeToggle } from '@/components/theme/ThemeToggle';
@@ -6,11 +6,20 @@ import { AuthButtons } from '@/components/auth/AuthButtons';
 import { NotificationCenter } from '@/components/notifications/NotificationCenter';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useAuth } from '@/hooks/useAuth';
+import { useIsMobile } from '@/hooks/use-mobile';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
 
 export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
   const { permissions } = useUserRole();
   const { user } = useAuth();
   const location = useLocation();
+  const isMobile = useIsMobile();
   
   const isSettingsPage = location.pathname === '/admin/settings';
   const backLink = isSettingsPage ? '/admin' : '/';
@@ -42,24 +51,65 @@ export function AdminHeader({ onRefresh }: { onRefresh?: () => void }) {
 
         {/* Right Section - Admin actions */}
         <div className="flex items-center gap-2">
+          {/* Mobile Menu */}
+          <Sheet>
+            <SheetTrigger asChild className="md:hidden">
+              <Button variant="ghost" size="icon">
+                <Menu className="h-5 w-5" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="right" className="w-[300px] sm:w-[400px]">
+              <SheetHeader>
+                <SheetTitle>Admin Menu</SheetTitle>
+              </SheetHeader>
+              <div className="flex flex-col gap-4 mt-6">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Theme</span>
+                  <ThemeToggle />
+                </div>
+                <Button 
+                  variant="ghost" 
+                  onClick={onRefresh}
+                  className="justify-start"
+                >
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  Refresh
+                </Button>
+                {permissions?.role_level === 'superuser' && !isSettingsPage && (
+                  <Button variant="ghost" asChild className="justify-start">
+                    <Link to="/admin/settings">
+                      <Settings className="w-4 h-4 mr-2" />
+                      Settings
+                    </Link>
+                  </Button>
+                )}
+              </div>
+            </SheetContent>
+          </Sheet>
+
+          {/* Desktop Actions */}
           <Button 
             variant="ghost" 
             size="sm" 
             onClick={onRefresh}
             title="Refresh admin data"
+            className="hidden md:flex"
           >
             <RefreshCw className="w-4 h-4" />
             <span className="hidden sm:ml-2 sm:inline">Refresh</span>
           </Button>
           {permissions?.role_level === 'superuser' && !isSettingsPage && (
-            <Button variant="ghost" size="sm" asChild>
+            <Button variant="ghost" size="sm" asChild className="hidden md:flex">
               <Link to="/admin/settings">
                 <Settings className="w-4 h-4" />
                 <span className="hidden sm:ml-2 sm:inline">Settings</span>
               </Link>
             </Button>
           )}
-          <ThemeToggle />
+          <div className="hidden md:block">
+            <ThemeToggle />
+          </div>
           {user && <NotificationCenter />}
           <AuthButtons />
         </div>