app-shell-5

1import {
2	Breadcrumb,
3	BreadcrumbItem,
4	BreadcrumbList,
5	BreadcrumbPage,
6} from "@/components/ui/breadcrumb";
7import { Button } from "@/components/ui/button";
8import { Separator } from "@/components/ui/separator";
9import { navLinks } from "@/components/app-shared";
10import { CustomTrigger } from "@/components/custom-trigger";
11import { NavUser } from "@/components/nav-user";
12 
13export function AppHeader() {
14	const activeItem = navLinks.find((item) => item.isActive);
15 
16	return (
17		<header className="sticky top-0 z-50 flex h-(--app-header-height) w-full shrink-0 items-center justify-between gap-2 border-b bg-background px-4 md:px-6">
18			<div className="flex items-center gap-3">
19				<CustomTrigger place="navbar" />
20			</div>
21			<Breadcrumb>
22				<BreadcrumbList>
23					<BreadcrumbItem>
24						<BreadcrumbPage>{activeItem?.title}</BreadcrumbPage>
25					</BreadcrumbItem>
26				</BreadcrumbList>
27			</Breadcrumb>{" "}
28			<div className="flex items-center gap-3">
29				<Button size="icon-sm" variant="outline">
30					<IconPlaceholder
31						hugeicons="HelpCircleIcon"
32						lucide="HelpCircleIcon"
33						phosphor="QuestionIcon"
34						remixicon="RiQuestionLine"
35						tabler="IconHelpCircle"
36					/>
37				</Button>
38				<Button aria-label="Notifications" size="icon-sm" variant="outline">
39					<IconPlaceholder
40						hugeicons="Notification03Icon"
41						lucide="BellIcon"
42						phosphor="BellIcon"
43						remixicon="RiNotification3Line"
44						tabler="IconBell"
45					/>
46				</Button>
47				<Separator
48					className="h-4 data-[orientation=vertical]:self-center"
49					orientation="vertical"
50				/>
51				<NavUser />
52			</div>
53		</header>
54	);
55}