Sidebar

<div
  style={{
    border: '1px solid var(--colors-border-default)',
    borderRadius: 8,
    display: 'flex',
    height: 280,
    overflow: 'hidden',
  }}
>
  <Sidebar.Provider style={{ minHeight: '100%' }}>
    <Sidebar>
      <Sidebar.Header>
        <Sidebar.Trigger />
        <span style={{ fontWeight: 600 }}>Acme</span>
      </Sidebar.Header>
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Workspace</Sidebar.GroupLabel>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton isActive>
                <Home />
                <span>Queue</span>
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton>
                <Settings />
                <span>Settings</span>
              </Sidebar.MenuButton>
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.Group>
      </Sidebar.Content>
      <Sidebar.Rail />
    </Sidebar>
    <Sidebar.Inset>
      <div style={{ alignItems: 'center', display: 'flex', gap: 8, padding: 12 }}>
        <Sidebar.Trigger />
        <strong>Task Queue</strong>
      </div>
    </Sidebar.Inset>
  </Sidebar.Provider>
</div>