# Astra Sidebar > A night-slate admin sidebar with the Astra mark, a straddling round collapse button, live-filtered search with a ⌘K shortcut, a gliding active row, a pinned Settings group and a profile with logout. Collapses to an icon rail with tooltips. - Category: Sidebar - Frameworks: Vanilla, React + CSS, React + Tailwind - Dark mode: yes - Access: free (sign in to copy the code) - Tags: navigation, collapsible, search, keyboard, tooltips, dark-mode, responsive - Page: https://builder.atheros.ai/components/sidebar-astra - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_sidebar_astra/preview-a7cf3ab1c684.webp ## 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 ``, 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** — `