mobile

src/apps/officer-web/Screens/Dashboard/Layout/Header/Header.tsx

@@ -1,23 +1,81 @@
-import { Link } from 'react-router';
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router';
+import { Menu } from 'lucide-react';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { useIsMobile } from 'hooks/useIsMobile';
+import type { DockItem } from '../Dock';
 import { UserMenu } from './UserMenu';
 
-export function Header() {
+type HeaderProps = {
+  dockItems?: DockItem[];
+};
+
+export function Header({ dockItems }: HeaderProps) {
+  const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
+  const location = useLocation();
+
+  const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to));
+
   return (
     <header className="fixed z-10 w-full">
       <div
         className="shrink-0 border-b backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between"
         style={{ backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' }}
       >
-        <Link to="/">
-          <img
-            src="/static/officer-logo.svg"
-            alt="Officer"
-            className="h-8 md:h-12 w-auto"
-            style={{ transform: 'skew(-15deg, -2deg)' }}
-          />
-        </Link>
+        <div className="flex items-center gap-2">
+          {isMobile && dockItems && (
+            <button onClick={() => setOpen(true)} className="p-1.5 rounded-md hover:bg-white/20 transition-colors">
+              <Menu className="h-5 w-5 text-white" />
+            </button>
+          )}
+          <Link to="/">
+            <img
+              src="/static/officer-logo.svg"
+              alt="Officer"
+              className="h-8 md:h-12 w-auto"
+              style={{ transform: 'skew(-15deg, -2deg)' }}
+            />
+          </Link>
+        </div>
         <UserMenu />
       </div>
+
+      {isMobile && dockItems && (
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle>Navigation</SheetTitle>
+            </SheetHeader>
+            <nav className="flex flex-col gap-1 mt-4 px-2">
+              {dockItems.map((item) => {
+                const active = isActive(item.to);
+                return (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    onClick={() => setOpen(false)}
+                    className={`flex items-center gap-3 px-3 py-2.5 rounded-lg transition-colors ${active ? 'bg-white/20' : 'hover:bg-white/10'}`}
+                  >
+                    <div
+                      className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
+                      style={{
+                        background: item.color,
+                        boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
+                      }}
+                    >
+                      <item.icon className="h-4 w-4 text-white" />
+                    </div>
+                    <span className={`text-sm ${active ? 'text-white font-medium' : 'text-white/80'}`}>
+                      {item.label}
+                    </span>
+                  </Link>
+                );
+              })}
+            </nav>
+          </SheetContent>
+        </Sheet>
+      )}
     </header>
   );
 }