From 1d2bdaf88c65e80deaa8ca1cbd07f0a53d4b5cda Mon Sep 17 00:00:00 2001
From: jyswee <jyswee@gmail.com>
Date: Thu, 23 Jul 2026 22:15:04 +0000
Subject: [PATCH] Seed: product-management template (23 files)

---
 src/components/Header.tsx | 122 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 src/components/Header.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..46a3b13
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuSeparator, DropdownMenuTrigger
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import {
+  Menu, Search, Bell, User, Settings, LogOut, Clock, ChevronRight
+} from "lucide-react";
+import { SidebarContent } from "@/components/Sidebar";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+const notifications = [
+  { title: "New feature vote", desc: "Visual Roadmap Board received 5 new votes", time: "5m ago", unread: true },
+  { title: "Feedback submitted", desc: "Elena Martinez submitted new feedback", time: "18m ago", unread: true },
+  { title: "Release published", desc: "v2.4.0 changelog is now live", time: "1h ago", unread: false },
+];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <header className="sticky top-0 z-40 bg-white/80 backdrop-blur-lg border-b border-slate-100">
+      <div className="flex items-center justify-between h-16 px-6">
+        {/* Mobile menu */}
+        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="sm" className="lg:hidden h-9 w-9 p-0">
+              <Menu className="h-5 w-5 text-slate-600" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="p-0 w-64 border-0">
+            <SidebarContent activePath="/" />
+          </SheetContent>
+        </Sheet>
+
+        {/* Breadcrumb */}
+        <div className="hidden lg:flex items-center gap-1 text-sm text-slate-400">
+          <span>ProductLab</span>
+          <ChevronRight className="h-3.5 w-3.5" />
+          <span className="text-slate-700 font-medium">Roadmap</span>
+        </div>
+
+        {/* Search */}
+        <div className="hidden sm:flex items-center flex-1 max-w-md mx-4">
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
+            <Input placeholder="Search features, feedback..." className="pl-10 bg-slate-50 border-slate-200 focus:bg-white h-9" />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+
+          {/* Notifications */}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="sm" className="relative h-9 w-9 p-0">
+                <Bell className="h-5 w-5 text-slate-600" />
+                <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-blue-600" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 p-0" align="end">
+              <div className="p-4 border-b border-slate-100">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-semibold text-sm">Notifications</h3>
+                  <Badge variant="secondary" className="text-xs">2 new</Badge>
+                </div>
+              </div>
+              <div className="max-h-72 overflow-y-auto">
+                {notifications.map((n, i) => (
+                  <div key={i} className={`p-4 border-b border-slate-50 hover:bg-slate-50 transition-colors \${n.unread ? "bg-blue-50/30" : ""}`}>
+                    <div className="flex items-start gap-2">
+                      {n.unread && <div className="h-2 w-2 rounded-full bg-blue-600 mt-1.5 shrink-0" />}
+                      <div>
+                        <p className="text-sm font-medium text-slate-900">{n.title}</p>
+                        <p className="text-xs text-slate-500 mt-0.5">{n.desc}</p>
+                        <p className="text-xs text-slate-400 mt-1 flex items-center gap-1">
+                          <Clock className="h-3 w-3" />{n.time}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="p-3 text-center">
+                <Button variant="ghost" size="sm" className="text-blue-600 hover:text-blue-700 text-xs">View All Notifications</Button>
+              </div>
+            </PopoverContent>
+          </Popover>
+
+          <Separator orientation="vertical" className="h-6 mx-1" />
+
+          {/* User Menu */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex items-center gap-2 h-9 px-2">
+                <Avatar className="h-7 w-7">
+                  <AvatarFallback className="text-xs bg-blue-100 text-blue-700">SK</AvatarFallback>
+                </Avatar>
+                <span className="hidden sm:block text-sm font-medium text-slate-700">Sarah Kim</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem><User className="mr-2 h-4 w-4" /> Profile</DropdownMenuItem>
+              <DropdownMenuItem><Settings className="mr-2 h-4 w-4" /> Settings</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="text-red-600"><LogOut className="mr-2 h-4 w-4" /> Log Out</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </header>
+  );
+}