Sidebar

 1import {
 2  Sidebar,
 3  SidebarHeader,
 4  SidebarNav,
 5  SidebarSection,
 6  SidebarItem,
 7  SidebarFooter,
 8  SidebarToggle,
 9} from "@/components/wensity/sidebar";
10import { IconLayoutDashboard, IconChartAreaLine, IconFolders, IconSettings } from "@tabler/icons-react";
11
12export function SidebarCollapsible() {
13  return (
14    <Sidebar variant="collapsible" width={220}>
15      <SidebarHeader>
16        <span className="text-sm font-semibold">Acme Inc</span>
17        <SidebarToggle className="ml-auto" />
18      </SidebarHeader>
19      <SidebarNav>
20        <SidebarSection>
21          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />} active>
22            Dashboard
23          </SidebarItem>
24          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />}>Analytics</SidebarItem>
25          <SidebarItem icon={<IconFolders className="size-[18px]" />}>Projects</SidebarItem>
26          <SidebarItem icon={<IconSettings className="size-[18px]" />}>Settings</SidebarItem>
27        </SidebarSection>
28      </SidebarNav>
29      <SidebarFooter>
30        <span className="text-xs text-muted-foreground">jordan@acme.com</span>
31      </SidebarFooter>
32    </Sidebar>
33  );
34}

 1import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
 2import { IconLayoutDashboard, IconChartAreaLine, IconInbox, IconBell, IconSettings } from "@tabler/icons-react";
 3
 4export function SidebarIconRail() {
 5  return (
 6    <Sidebar variant="icon-rail" aria-label="Icon navigation">
 7      <SidebarNav>
 8        <SidebarSection>
 9          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />} active>
10            Dashboard
11          </SidebarItem>
12          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />}>Analytics</SidebarItem>
13          <SidebarItem icon={<IconInbox className="size-[18px]" />}>Inbox</SidebarItem>
14          <SidebarItem icon={<IconBell className="size-[18px]" />}>Notifications</SidebarItem>
15          <SidebarItem icon={<IconSettings className="size-[18px]" />}>Settings</SidebarItem>
16        </SidebarSection>
17      </SidebarNav>
18    </Sidebar>
19  );
20}

 1import { Sidebar, SidebarNav, SidebarSection, SidebarItem, SidebarNested } from "@/components/wensity/sidebar";
 2import { IconRocket, IconShield } from "@tabler/icons-react";
 3
 4export function SidebarNestedDemo() {
 5  return (
 6    <Sidebar width={230}>
 7      <SidebarNav>
 8        <SidebarSection label="Platform">
 9          <SidebarNested icon={<IconRocket className="size-[18px]" />} label="Deployments" defaultOpen>
10            <SidebarItem>Production</SidebarItem>
11            <SidebarItem>Staging</SidebarItem>
12          </SidebarNested>
13          <SidebarNested icon={<IconShield className="size-[18px]" />} label="Security" defaultOpen active>
14            <SidebarItem active>API Keys</SidebarItem>
15            <SidebarItem>Audit Log</SidebarItem>
16            <SidebarItem>Single Sign-On</SidebarItem>
17          </SidebarNested>
18        </SidebarSection>
19      </SidebarNav>
20    </Sidebar>
21  );
22}

 1import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
 2import { IconInbox, IconBox, IconUsers } from "@tabler/icons-react";
 3
 4export function SidebarFloating() {
 5  return (
 6    <Sidebar variant="floating" width={220}>
 7      <SidebarNav>
 8        <SidebarSection>
 9          <SidebarItem icon={<IconInbox className="size-[18px]" />} active>
10            Inbox
11          </SidebarItem>
12          <SidebarItem icon={<IconBox className="size-[18px]" />}>Products</SidebarItem>
13          <SidebarItem icon={<IconUsers className="size-[18px]" />}>Customers</SidebarItem>
14        </SidebarSection>
15      </SidebarNav>
16    </Sidebar>
17  );
18}

 1import { Sidebar, SidebarNav, SidebarSection, SidebarItem } from "@/components/wensity/sidebar";
 2import { IconLayoutDashboard, IconChartAreaLine, IconUsers } from "@tabler/icons-react";
 3
 4export function SidebarResizable() {
 5  return (
 6    <Sidebar variant="resizable" width={220} minWidth={170} maxWidth={340}>
 7      <SidebarNav>
 8        <SidebarSection label="Reports">
 9          <SidebarItem icon={<IconLayoutDashboard className="size-[18px]" />}>Dashboard</SidebarItem>
10          <SidebarItem icon={<IconChartAreaLine className="size-[18px]" />} active>
11            Customer Analytics
12          </SidebarItem>
13          <SidebarItem icon={<IconUsers className="size-[18px]" />}>Cohort Retention</SidebarItem>
14        </SidebarSection>
15      </SidebarNav>
16    </Sidebar>
17  );
18}