claude-code

web/components/mobile/MobileHeader.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Menu, ChevronLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface MobileHeaderProps {
+  title?: string;
+  onMenuOpen: () => void;
+  onBack?: () => void;
+  right?: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * Compact top bar for mobile: hamburger (or back) on the left, title in centre, optional actions on the right.
+ * Tap targets are at least 44×44 px per WCAG / Apple HIG guidelines.
+ */
+export function MobileHeader({
+  title = "Chat",
+  onMenuOpen,
+  onBack,
+  right,
+  className,
+}: MobileHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "flex items-center gap-2 px-2 border-b border-surface-800 bg-surface-900/80 backdrop-blur-sm",
+        "h-[52px] flex-shrink-0",
+        className
+      )}
+    >
+      {/* Left action — back or hamburger */}
+      {onBack ? (
+        <button
+          onClick={onBack}
+          className="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-md text-surface-400 hover:text-surface-100 active:bg-surface-800 transition-colors"
+          aria-label="Go back"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+      ) : (
+        <button
+          onClick={onMenuOpen}
+          className="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-md text-surface-400 hover:text-surface-100 active:bg-surface-800 transition-colors"
+          aria-label="Open sidebar"
+        >
+          <Menu className="w-5 h-5" />
+        </button>
+      )}
+
+      {/* Title */}
+      <h1 className="flex-1 text-sm font-medium text-surface-100 truncate">{title}</h1>
+
+      {/* Right actions */}
+      {right && <div className="flex items-center">{right}</div>}
+    </header>
+  );
+}