شريط التنقّل (Navbar)

npx @smicolon/fasla-ui@latest add navbar

"use client"

import { useState } from "react"
import { Navbar, NavbarBrand, NavbarContent, NavbarMenu, NavbarLink, NavbarToggle } from "@/components/blocks/navbar"

const links = [
  { label: "الرئيسية", href: "/" },
  { label: "المنتجات", href: "/products" },
  { label: "الطلبات", href: "/orders" },
]

export function SiteNavbar() {
  const [open, setOpen] = useState(false)

  return (
    <header>
      <Navbar>
        <NavbarBrand>
          <span className="font-semibold">متجري</span>
        </NavbarBrand>
        <NavbarContent align="end">
          <NavbarMenu mobileMenu>
            {links.map((link, index) => (
              <NavbarLink key={link.href} href={link.href} active={index === 0}>
                {link.label}
              </NavbarLink>
            ))}
          </NavbarMenu>
          <NavbarToggle
            open={open}
            onClick={() => setOpen(!open)}
            aria-label={open ? "إغلاق القائمة" : "فتح القائمة"}
            aria-controls="mobile-menu"
          />
        </NavbarContent>
      </Navbar>
      {open && (
        <nav id="mobile-menu" className="flex flex-col gap-3 border-b bg-background p-4 md:hidden">
          {links.map((link, index) => (
            <NavbarLink key={link.href} href={link.href} active={index === 0}>
              {link.label}
            </NavbarLink>
          ))}
        </nav>
      )}
    </header>
  )
}