Module Update

src/modules/layout/components/site-header.tsx

@@ -0,0 +1,105 @@
+"use client"
+
+import * as React from "react"
+import { Bell, Menu, Search } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Input } from "@/shared/components/ui/input"
+import { Separator } from "@/shared/components/ui/separator"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/shared/components/ui/breadcrumb"
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+
+import { useSidebar } from "./sidebar-provider"
+
+export function SiteHeader() {
+  const { toggleSidebar, isMobile } = useSidebar()
+
+  return (
+    <header className="bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 flex h-16 items-center border-b px-4 backdrop-blur-sm">
+      <div className="flex flex-1 items-center gap-4">
+        {/* Mobile Toggle */}
+        {isMobile && (
+          <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-2">
+            <Menu className="size-5" />
+            <span className="sr-only">Toggle Sidebar</span>
+          </Button>
+        )}
+
+        <Separator orientation="vertical" className="mr-2 hidden h-6 md:block" />
+
+        {/* Breadcrumbs */}
+        <Breadcrumb className="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Overview</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+
+      <div className="flex items-center gap-4">
+        {/* Global Search */}
+        <div className="relative hidden md:block">
+          <Search className="text-muted-foreground absolute top-2.5 left-2.5 size-4" />
+          <Input
+            type="search"
+            placeholder="Search... (Cmd+K)"
+            className="w-[200px] pl-9 lg:w-[300px]"
+          />
+        </div>
+
+        {/* Notifications */}
+        <Button variant="ghost" size="icon" className="text-muted-foreground">
+          <Bell className="size-5" />
+          <span className="sr-only">Notifications</span>
+        </Button>
+
+        {/* User Nav */}
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="relative size-8 rounded-full">
+                    <Avatar className="size-8">
+                        <AvatarImage src="/avatars/01.png" alt="@user" />
+                        <AvatarFallback>AD</AvatarFallback>
+                    </Avatar>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="end" forceMount>
+                <DropdownMenuLabel className="font-normal">
+                    <div className="flex flex-col space-y-1">
+                        <p className="text-sm font-medium leading-none">Admin User</p>
+                        <p className="text-muted-foreground text-xs leading-none">admin@nextedu.com</p>
+                    </div>
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Profile</DropdownMenuItem>
+                <DropdownMenuItem>Settings</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive focus:bg-destructive/10">
+                    Log out
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}