Hesoyam

Sidebar

Leftover shadcn app shell. Hesoyam has no Sidebar analog — document usage, do not invent a replacement.

Parts

Wrap the app in SidebarProvider. Sidebar is the rail. SidebarInset is the main column. SidebarTrigger toggles desktop collapse and the mobile sheet.

Sidebar is leftover shadcn. There is no Hesoyam navigation rail. Keep this folder for the existing shell. New chrome should reuse the current Sidebar tree, not a one-off list of links.

Acme

Project

        

          1
          
          <SidebarProvider class="min-h-0 h-[240px] max-w-sm overflow-hidden rounded-[8px] border border-[var(--ds-gray-alpha-400)]">
        

          2
          
            <Sidebar collapsible="none">
        

          3
          
              <SidebarHeader>Acme</SidebarHeader>
        

          4
          
              <SidebarContent>
        

          5
          
                <SidebarGroup>
        

          6
          
                  <SidebarGroupLabel>Project</SidebarGroupLabel>
        

          7
          
                  <SidebarGroupContent>
        

          8
          
                    <SidebarMenu>
        

          9
          
                      <SidebarMenuItem>
        

          10
          
                        <SidebarMenuButton>
        

          11
          
                          Overview
        

          12
          
                        </SidebarMenuButton>
        

          13
          
                      </SidebarMenuItem>
        

          14
          
                    </SidebarMenu>
        

          15
          
                  </SidebarGroupContent>
        

          16
          
                </SidebarGroup>
        

          17
          
              </SidebarContent>
        

          18
          
            </Sidebar>
        

          19
          
          </SidebarProvider>

Props

  • side — left (default) or right.
  • variant — sidebar, floating, or inset.
  • collapsible — offcanvas (default), icon, or none.
  • Provider: default-open / v-model:open. Cookie remembers the desktop state. ⌘B / Ctrl+B toggles.
  • This preview uses collapsible="none" so the rail stays in flow and does not pin to the viewport.

Best practices

  • One SidebarProvider per shell. Nested providers fight over the same cookie and shortcut.
  • Collapsed icon mode needs a tooltip on SidebarMenuButton — the label is clipped.
  • Do not restyle the rail with a new width scale. Width tokens live on the provider.
  • Mobile already becomes a Sheet. Do not wrap Sidebar in another drawer.