The parts of a sidebar

// apps/docs/examples/ui/sidebar.tsx'use client';
import {useState} from 'react';import {  FileTextIcon,  HomeIcon,  PlusIcon,  SettingsIcon,  UsersIcon,} from 'lucide-react';
import {  Sidebar,  SidebarContent,  SidebarFooter,  SidebarGroup,  SidebarGroupAction,  SidebarGroupContent,  SidebarGroupLabel,  SidebarHeader,  SidebarMenu,  SidebarMenuBadge,  SidebarMenuButton,  SidebarMenuItem,  SidebarMenuSub,  SidebarMenuSubButton,  SidebarMenuSubItem,  SidebarProvider,} from '@workspace/active-ui/components/primitives/sidebar';
const MAIN = [  {label: 'Home', icon: HomeIcon},  {label: 'Participants', icon: UsersIcon, badge: '12'},  {label: 'Schemes', icon: FileTextIcon},];
/** * The parts of a sidebar, in a frame of its own: a header, a labelled group * with an action, menu buttons with icons and a badge, a submenu, and a * footer. `collapsible="none"` keeps it in place inside this example; the * navigation of this site is the same component in its full form, with the * sheet on small screens. */export default function SidebarExample() {  const [current, setCurrent] = useState('Participants');  const pick = (label: string) => () => setCurrent(label);  return (    <SidebarProvider className="min-h-0 w-auto">      <Sidebar        collapsible="none"        mobileLabel="Example navigation"        className="h-96 rounded-lg border"      >        <SidebarHeader>          <p className="px-2 py-1 font-semibold">Pension office</p>        </SidebarHeader>        <SidebarContent>          <SidebarGroup>            <SidebarGroupLabel>Work</SidebarGroupLabel>            <SidebarGroupAction aria-label="Add a scheme" title="Add a scheme">              <PlusIcon aria-hidden />            </SidebarGroupAction>            <SidebarGroupContent>              <SidebarMenu>                {MAIN.map(({label, icon: Icon, badge}) => (                  <SidebarMenuItem key={label}>                    <SidebarMenuButton                      isActive={current === label}                      aria-current={current === label ? 'page' : undefined}                      onClick={pick(label)}                    >                      <Icon aria-hidden />                      <span>{label}</span>                    </SidebarMenuButton>                    {badge ? (                      <SidebarMenuBadge aria-label={`${badge} new`}>                        {badge}                      </SidebarMenuBadge>                    ) : null}                  </SidebarMenuItem>                ))}                <SidebarMenuItem>                  <SidebarMenuButton                    isActive={current.startsWith('Settings')}                    onClick={pick('Settings · General')}                  >                    <SettingsIcon aria-hidden />                    <span>Settings</span>                  </SidebarMenuButton>                  <SidebarMenuSub>                    {['General', 'Users'].map((sub) => (                      <SidebarMenuSubItem key={sub}>                        <SidebarMenuSubButton                          render={<button type="button" />}                          isActive={current === `Settings · ${sub}`}                          onClick={pick(`Settings · ${sub}`)}                        >                          {sub}                        </SidebarMenuSubButton>                      </SidebarMenuSubItem>                    ))}                  </SidebarMenuSub>                </SidebarMenuItem>              </SidebarMenu>            </SidebarGroupContent>          </SidebarGroup>        </SidebarContent>        <SidebarFooter>          <p className="text-muted-foreground px-2 text-xs">            Showing: {current}          </p>        </SidebarFooter>      </Sidebar>    </SidebarProvider>  );}