Astra Sidebar

Features

• Night-slate panel (#070E13) with rounded corners on a plain desk, white Onest labels and cool steel section heads
• Astra brand mark and wordmark; the mark is built at runtime from path data so it inherits the panel ink
• Round chevron button straddling the panel's right edge; it collapses the panel to a 5rem icon rail and the chevron turns 180°
• Collapse animates flex-basis only: icons, the search glyph, the logo and the avatar sit in fixed lanes so nothing jumps while labels fade
• Rail tooltips: one shared tooltip outside the controls, positioned by script next to the hovered or keyboard-focused row
• Gliding active row: a single graphite pill per group slides between rows on transform only; the current row also paints its own fill once the glide lands
• Hover (a half-strength graphite wash) and current page (full graphite) are visibly different states
• Search filters both groups as you type, highlights the matched letters with <mark>, hides empty groups, shows an empty state and announces the result count
• ⌘K / Ctrl+K focuses search from anywhere (and expands a collapsed rail); Escape clears it
• Arrow keys, Home and End move between visible rows across both groups; aria-current="page" marks the active row
• Unread count on Notifications; it becomes a small dot on the bell in the rail
• Settings group pinned at the bottom; the Main list scrolls on its own if the frame is short
• Profile row with avatar, name, email and a coral logout button
• Light and dark halves: the panel stays night slate, the desk flips, and a hairline edge separates the panel from a dark desk

Accessibility

Landmark

<nav aria-label="Astra navigation"> with two labelled sections

Current page

aria-current="page" on the active row

Names in the rail

Every row carries aria-label (with the unread count), so it keeps its name when labels fade

Collapse button

aria-expanded and a label that flips between Collapse/Expand

Search

role="search", aria-keyshortcuts, polite live region with the result count

Tooltip

One shared element outside the controls, aria-hidden (rows already carry their names)

Focus

:focus-visible rings in the dark-readable primary on the panel

Reduced motion

All transitions collapse; the pill jumps

Customise it with AI

Open Astra Sidebar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the sidebar is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.