Rail Sidebar

Features

• The logo is a mask (--rs-mark, assets/mark.svg inlined as a data URI so it also paints from file://; an impossible-triangle mark; assets/mark-alt.svg holds a three-hexagon alternative) painted in the accent on a soft raised tile (neutral surface, faint vertical gradient, 1px lighter rim, subtle shadow); static
• Icon rail with a primary group, a rule, a secondary group and the account photo with an accent ring and online dot; tiles are role="tab" with roving tabindex
• Every rail icon is a Heroicons outline/solid pair: the selected tile cross-fades to the solid glyph, and a 3px accent marker glides to it on the rail's edge
• Clicking a rail tile swaps the panel: the old links and pill slide out vertically along the rail direction, the list morphs to the new section's measured height, the new links slide in from the opposite side 14ms apart (the way the builder's navbar panel travels between menus), the title slides in, and the pill lands on the section's remembered link
• Clicking the selected tile, the back arrow or anywhere outside the sidebar folds the panel (an open profile menu is dismissed first); the frame's grid column eases to 0 over 320ms while children fade and slide, and while folded one shared tooltip follows hovered or focused rail tiles; the folded panel is inert, so Tab never lands on its hidden controls
• Panel links carry a Heroicons outline icon
• On a narrow frame (≤480px) the sidebar becomes a drawer: a compact top bar shows a menu button, the logo mark and the current section and link; the menu button slides the rail and panel in from the left over a scrim, leaving a strip to tap. The scrim, Escape, the panel's back arrow or choosing a link closes it, focus moves into the drawer and back to the menu button, and ⌘K opens it straight into the search; resizing never animates, so crossing the breakpoint swaps layouts instantly
• On a short frame the tile groups scroll between the pinned logo and avatar (hidden scrollbar, the marker scrolls with them, keyboard selection scrolls the tile into view), so the rail never overflows the frame's height
• One shared active pill moves between links by transform; the rows' ink catches up by distance (45ms per row, capped at four) so colour follows the plate instead of running ahead; it never flies in on first paint and follows filtering and resize
• A hairline separator and an uppercase eyebrow in the accent ink (per section: Flight ops, Live data, Tracking…) sit between the search and the list, so search, navigation and the footer read as three zones
• Search filters the section's links as you type and highlights the matched text; ⌘K / Ctrl+K focuses it from anywhere, Escape clears, an empty state replaces the list
• The alerts tile carries an unread badge in the design system's error state pair (fill and on-colour, light and dark), the same corner shape as the tiles, ringed by the rail colour, hanging off the tile's corner
• Clicking the avatar opens a profile menu beside the rail: photo, name and email, then View profile, Preferences, Keyboard shortcuts and a destructive Sign out — role="menu", arrow keys, Escape, outside-press close
• Footer as the avatar's expanded label: name and an "Online · role" status line, vertically centred on the rail avatar (which carries the single online dot in the system's success state), plus an accent-tinted comms button that fills solid on hover
• Every colour is a design-system role — surface, canvas, accent, selection fill, error, success — so a stamped system retones all of it; only the standalone page carries a violet #605DFF accent fallback
• Dark theme: the DS dark canvas deepened for the rail and panel, the same accent pill and logo tile
• Keyboard: Arrow Up/Down and Home/End move the rail selection, Arrow Right enters the panel, Arrow Up/Down and Home/End move within links, Arrow Left returns to the rail
• Rail sections, links and icons come from RAIL_SECTIONS in js/data.js
• prefers-reduced-motion disables all motion

Accessibility

Rail semantics

Tiles are role="tab" with aria-selected and aria-controls="panel" inside role="tablist" groups; the panel is the role="tabpanel" they control

Profile menu

Avatar is aria-haspopup="menu" with aria-expanded; the menu is role="menu" with menuitem buttons, Escape and outside-press close (focus returns to the avatar), Tab closes it and moves on

Tooltip

One shared visual label outside the tiles (aria-hidden; tiles already carry their aria-label), shown on hover and focus while folded

Drawer

Below 480px the menu button carries aria-expanded/aria-controls; the closed drawer is inert, the open drawer makes the top bar inert, focus moves to the current link and returns to the menu button on close

Folded panel

inert while folded; folding from inside the panel returns focus to the selected rail tile

Roving focus

Only the selected tile is in the tab order; arrows move selection and focus

Panel

<section role="tabpanel" aria-labelledby>; the fold button carries aria-expanded and aria-controls

Search

Labelled type="search" input; the label wraps the field so the icon area is clickable

Current link

aria-current="page" on the active link; the pill itself is aria-hidden

Badge

The tile's aria-label names the unread total (Alerts, 3 unread); the visual digit is aria-hidden

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Rail Sidebar in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation 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.