Mobile Navigation Block

1"use client";
2 
3import { Menu, Sparkles } from "lucide-react";
4 
5import { Button } from "@/components/ui/atoms/button";
6import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/molecules/sheet";
7import {
8  navigationItems,
9  type NavigationItem,
10} from "@/components/ui/blocks/phase8/navigation-block";
11 
12function MobileNavigationBlock({
13  items = navigationItems,
14  activeHref,
15}: {
16  items?: NavigationItem[];
17  activeHref?: string;
18}) {
19  return (
20    <div
21      data-slot="mobile-navigation-block"
22      className="@container/mobile-nav flex items-center justify-between rounded-lg border border-glass-border-outer bg-glass p-2 shadow-sm backdrop-blur-glass"
23    >
24      <a href="#overview" className="flex items-center gap-2 text-sm font-semibold">
25        <Sparkles className="size-4 text-primary" /> Poyraz UI
26      </a>
27      <Sheet>
28        <SheetTrigger asChild>
29          <Button variant="ghost" size="icon" aria-label="Open primary navigation">
30            <Menu className="size-4" />
31          </Button>
32        </SheetTrigger>
33        <SheetContent side="right" surface="glass" className="w-[min(88vw,22rem)]">
34          <SheetTitle>Navigation</SheetTitle>
35          <nav aria-label="Primary navigation" className="mt-6 flex flex-col gap-1">
36            {items.map((item) => (
37              <a
38                key={item.href}
39                href={item.href}
40                aria-current={activeHref === item.href ? "page" : undefined}
41                className="rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-surface-subtle hover:text-foreground aria-[current=page]:bg-primary-muted aria-[current=page]:text-primary-muted-foreground"
42              >
43                {item.label}
44              </a>
45            ))}
46          </nav>
47        </SheetContent>
48      </Sheet>
49    </div>
50  );
51}
52 
53export { MobileNavigationBlock };