Sidebar

npx @smicolon/fasla-ui@latest add sidebar

import { LayoutDashboardIcon, SettingsIcon, ShoppingCartIcon } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarItem,
  SidebarProfile,
  SidebarSubItem,
} from "@/components/ui/sidebar"

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader
        logo={<img src="/logo.svg" alt="Fasla" className="h-7" />}
        logoIcon={<img src="/logo-icon.svg" alt="Fasla" className="size-7" />}
      />
      <SidebarContent aria-label="Main">
        <SidebarGroup label="Store">
          <SidebarItem icon={<LayoutDashboardIcon strokeWidth={1.5} />} label="Dashboard" href="/dashboard" />
          <SidebarItem icon={<ShoppingCartIcon strokeWidth={1.5} />} label="Orders">
            <SidebarSubItem label="All orders" href="/orders" selected />
            <SidebarSubItem label="Returns" href="/orders/returns" />
          </SidebarItem>
        </SidebarGroup>
        <SidebarGroup label="Account">
          <SidebarItem icon={<SettingsIcon strokeWidth={1.5} />} label="Settings" href="/settings" />
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarProfile name="Nadia Rahman" description="Fasla" avatar={{ src: "/avatar.png" }} />
      </SidebarFooter>
    </Sidebar>
  )
}

"use client"

import { useState } from "react"
import { LayoutDashboardIcon } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarHeader,
  SidebarItem,
} from "@/components/ui/sidebar"

export function CollapsibleSidebar() {
  // Keep it in your layout state, or in a cookie, to remember it between pages.
  const [collapsed, setCollapsed] = useState(false)

  return (
    <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
      <SidebarHeader logo={<img src="/logo.svg" alt="Fasla" className="h-7" />} />
      <SidebarContent>
        <SidebarGroup label="Store">
          <SidebarItem icon={<LayoutDashboardIcon strokeWidth={1.5} />} label="Dashboard" href="/dashboard" />
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { LayoutDashboardIcon, ShoppingCartIcon } from "lucide-react"
import { Sidebar, SidebarContent, SidebarGroup, SidebarItem } from "@/components/ui/sidebar"

const links = [
  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboardIcon },
  { href: "/orders", label: "Orders", icon: ShoppingCartIcon },
]

export function RouterSidebar() {
  const pathname = usePathname()

  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup label="Store">
          {links.map(({ href, label, icon: Icon }) => (
            <SidebarItem
              key={href}
              label={label}
              icon={<Icon strokeWidth={1.5} />}
              render={<Link href={href} />}
              selected={pathname === href}
            />
          ))}
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

import { CalendarIcon, LayoutDashboardIcon } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarItem,
  SidebarPlanCard,
  SidebarProfile,
} from "@/components/ui/sidebar"

export function SidebarWithPlan() {
  return (
    <Sidebar>
      <SidebarContent>
        <SidebarGroup label="Store">
          <SidebarItem icon={<LayoutDashboardIcon strokeWidth={1.5} />} label="Dashboard" href="/dashboard" />
        </SidebarGroup>
      </SidebarContent>
      <SidebarPlanCard
        title="Pro plan"
        description="3 team members"
        footer="Next renewal: 10 Mar"
        footerIcon={<CalendarIcon strokeWidth={1.5} />}
      />
      <SidebarFooter>
        <SidebarProfile name="Nadia Rahman" description="Fasla" />
      </SidebarFooter>
    </Sidebar>
  )
}