Sidebar navigation

Example

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
  Button,
  SidebarCollapseTrigger,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarNav,
  SidebarNavGroup,
  SidebarNavLink,
  SidebarProvider,
} from "matcha-ui";

const sidebar = (
  <>
    <SidebarHeader>Acme</SidebarHeader>
    <SidebarContent>
      <SidebarNav>
        <SidebarNavLink href="/app" isActive>
          Dashboard
        </SidebarNavLink>
        <SidebarNavLink href="/customers">Customers</SidebarNavLink>
      </SidebarNav>
      <SidebarNavGroup label="Workspace" defaultOpen>
        <SidebarNavLink href="/projects">Projects</SidebarNavLink>
      </SidebarNavGroup>
    </SidebarContent>
    <SidebarFooter>
      <div data-sidebar-persist="" className="flex items-center gap-2">
        <Avatar className="size-8">
          <AvatarImage src="/avatar.jpg" alt="" />
          <AvatarFallback>YO</AvatarFallback>
        </Avatar>
        <Button variant="ghost" size="sm" className="text-xs">
          Sign out
        </Button>
      </div>
    </SidebarFooter>
  </>
);

<SidebarProvider>
  <div className="flex h-screen">
    <aside className="flex w-64 flex-col border-r">{sidebar}</aside>
    <div className="flex w-9 flex-col items-center border-l pt-2">
      <SidebarCollapseTrigger />
    </div>
    <main className="flex-1">{/* page */}</main>
  </div>
</SidebarProvider>