An adaptive, inverted-curve notch navigation system featuring a desktop triple-island layout that seamlessly morphs into a unified responsive mobile drawer with spring animations and zero border seams.
"use client";
import { useState } from "react";
import {
Activity,
ArrowDownUp,
BarChart2,
Command,
Eye,
EyeOff,
Layers,
LogOut,
Sparkles,
User,
Users,
} from "lucide-react";
import type {
NotchItemData,
NotchPosition,
} from "@/components/ui/adaptive-notch-navigation-bar";
import { NotchNav } from "@/components/ui/adaptive-notch-navigation-bar";
const NAV_ITEMS: NotchItemData[] = [
{ id: "dashboard", label: "Dashboard", icon: BarChart2 },
{ id: "profiles", label: "Profiles", icon: Users },
{ id: "funnels", label: "Funnels", icon: Layers },
{ id: "performance", label: "Performance", icon: Activity },
{ id: "realtime", label: "Realtime", icon: Sparkles, badge: "Live" },
];
export default function NotchNavDemo() {
const [activeId, setActiveId] = useState<string>("dashboard");
const [position, setPosition] = useState<NotchPosition>("top");
const [showLogo, setShowLogo] = useState<boolean>(true);
const [showRightContent, setShowRightContent] = useState<boolean>(true);
const handleActiveChange = (id: string) => {
setActiveId(id);
};
const handleTogglePosition = () => {
setPosition((prev) => (prev === "top" ? "bottom" : "top"));
};
const handleToggleLogo = () => {
setShowLogo((prev) => !prev);
};
const handleToggleRightContent = () => {
setShowRightContent((prev) => !prev);
};
const handleSignOut = () => {
console.log("Sign out triggered");
};
const LogoSlot = (
<div className="flex items-center gap-1.5 sm:gap-2 h-8.5">
<div className="flex size-7 items-center justify-center rounded-lg bg-zinc-800 dark:bg-zinc-300">
<Command className="size-4 text-zinc-50 dark:text-zinc-950" />
</div>
<span className="hidden sm:inline text-xs sm:text-sm font-bold tracking-tight">
Acme
</span>
</div>
);
const RightContentSlot = (
<div className="flex items-center gap-1.5 sm:gap-2 h-8.5">
<div className="hidden sm:flex size-7 items-center justify-center rounded-full bg-zinc-800 text-zinc-300 dark:bg-zinc-300 dark:text-zinc-800">
<User className="size-4" />
</div>
<button
type="button"
onClick={handleSignOut}
aria-label="Sign out"
className="cursor-pointer items-center gap-1.5 text-xs font-medium text-zinc-400 hover:text-zinc-200 flex dark:text-zinc-600 dark:hover:text-zinc-900 outline-none"
>
<span className="hidden sm:inline">Sign out</span>
<LogOut className="size-4 sm:size-3.5" />
</button>
</div>
);
return (
<NotchNav
items={NAV_ITEMS}
activeId={activeId}
position={position}
logo={LogoSlot}
rightContent={RightContentSlot}
showLogo={showLogo}
showRightContent={showRightContent}
onActiveChange={handleActiveChange}
>
<div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-border bg-card p-5 text-center shadow-xs">
<div className="flex flex-col items-center">
<span className="text-xs font-medium text-muted-foreground">
Active Tab
</span>
<p className="text-lg font-bold text-foreground capitalize">
{activeId}
</p>
</div>
<div className="flex w-full flex-col gap-2">
<button
type="button"
onClick={handleTogglePosition}
className="flex w-full cursor-pointer items-center justify-between rounded-xl border border-border bg-background px-3.5 py-2 text-xs font-semibold text-foreground shadow-xs transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring outline-none"
>
<span className="flex items-center gap-1.5 text-muted-foreground">
<ArrowDownUp className="size-3.5" />
Position
</span>
<span className="font-bold text-foreground capitalize">
{position}
</span>
</button>
<div className="mt-1 flex items-center gap-2">
<button
type="button"
onClick={handleToggleLogo}
className="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-border bg-background py-2 text-[11px] font-semibold text-foreground shadow-xs transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring outline-none"
>
{showLogo ? (
<Eye className="size-3 text-emerald-500" />
) : (
<EyeOff className="size-3 text-muted-foreground" />
)}
Logo Notch
</button>
<button
type="button"
onClick={handleToggleRightContent}
className="flex flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-xl border border-border bg-background py-2 text-[11px] font-semibold text-foreground shadow-xs transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring outline-none"
>
{showRightContent ? (
<Eye className="size-3 text-emerald-500" />
) : (
<EyeOff className="size-3 text-muted-foreground" />
)}
Action Notch
</button>
</div>
</div>
</div>
</NotchNav>
);
}