Sidebar Nav

Usage

import { SidebarNav } from '@wdzyi/ui';

<div style={{ height: '100dvh' }}>
  <SidebarNav
    workspaces={[{ id: 'acme', name: 'Acme Inc.' }]}
    items={[
      { id: 'home', label: 'Home', icon: <HomeIcon /> },
      { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, count: 3 },
    ]}
    sections={[{ id: 'projects', label: 'Projects', searchable: true, items: projects }]}
    value={page}
    onChange={setPage}
  />
</div>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsSidebarNavItem[]

The main places, at the top. Each has an id, a label, a 16px icon, a count and an href, which makes it a link. Without an icon, its first letter stands in.

sectionsSidebarNavSection[]

Groups under them, each with a label and its own items. Each one folds, and a searchable one has a search in its header.

value, defaultValuestring = the first item

The current row, which keeps the foil mark. Leave value out and it keeps track itself.

onChange(id: string) => void

Called with the row that was chosen.

workspacesSidebarNavWorkspace[]

The switch at the top, each with an id, a name and a 20px mark. Without any, the top is just the button that shuts it.

workspace, onWorkspaceChangestring, (id: string) => void

The workspace you’re in, and the one that was picked from the menu.

collapsed, defaultCollapsedboolean = false

Shut to a rail of icons. Leave collapsed out and its own button does it.

onCollapsedChange(collapsed: boolean) => void

Called when its button opens or shuts it.

footerReactNode

At the foot, such as a button. It goes while the sidebar is shut.

labelstring = 'Sidebar'

Names the navigation for screen readers.

Notes

• The plate follows the pointer and the keyboard, and goes back to the current row when they leave. It moves by transform, and it’s measured again while a section folds, so it keeps up with the rows below.
• It shuts by its grid track, so the panel inside keeps its width and nothing reflows on the way. The words go first, and the button that shuts it rides the edge across to become the rail’s top button.
• In the rail, a row’s name comes up beside it on hover or keyboard focus, a section becomes a short rule and a count becomes a dot.
• Up and down move between the rows, across the sections. In a search, Enter takes the first match, the down arrow goes into the list and Escape closes it. The workspace menu works from the keyboard as a menu should.
• It fills the height of its parent, and the list scrolls between the top and the foot. With reduced motion, everything changes without the glide.