شريط جانبي (Sidebar)

npx @smicolon/fasla-ui@latest add sidebar

"use client"

import { useState } from "react"
import { LayoutDashboard, Package, Settings, ShoppingCart } from "lucide-react"
import {
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarItem,
  SidebarCollapseButton,
} from "@/components/blocks/sidebar"

const items = [
  { label: "لوحة التحكم", icon: <LayoutDashboard className="size-4" /> },
  { label: "الطلبات", icon: <ShoppingCart className="size-4" /> },
  { label: "المنتجات", icon: <Package className="size-4" /> },
  { label: "الإعدادات", icon: <Settings className="size-4" /> },
]

export function StoreSidebar() {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
      <SidebarHeader>
        {!collapsed && <span className="font-semibold">متجري</span>}
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup label={collapsed ? undefined : "المتجر"}>
          {items.map((item, index) => (
            <SidebarItem key={item.label} icon={item.icon} active={index === 0} collapsed={collapsed}>
              {item.label}
            </SidebarItem>
          ))}
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarCollapseButton
          collapsed={collapsed}
          onCollapsedChange={setCollapsed}
          aria-label={collapsed ? "توسيع الشريط الجانبي" : "طيّ الشريط الجانبي"}
        />
      </SidebarFooter>
    </Sidebar>
  )
}