Profile Drawer

Features

• Fixed GitHub-style top bar with a mark logo, a hoverable Dashboard page title and a hairline bottom border
• Right-aligned Octicon action buttons — Issues, Pull requests and Notifications with an unread blue dot — each carrying an aria-label
• Avatar trigger opens a right-side profile drawer with a translate/opacity slide, closing on the X, on Escape and on outside-click
• Focus moves to the close button on open and returns to the avatar trigger on close
• Data-driven — navigation actions, the profile identity and the menu rows all render from js/data.js through esc()
• Official GitHub Octicons live in a JS icon registry and render via innerHTML, keeping the source glyphs 1:1
• Avatar image degrades to a token-colored initials disc through a single delegated error listener
• Coherent GitHub-dark counterpart under body.dark; fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Global"> wraps the top bar

Menu semantics

The drawer list is role="menu" with role="menuitem" rows and role="separator" dividers

Avatar trigger

<button aria-haspopup="menu" aria-expanded aria-controls="pfd-drawer"> with an aria-label

Labelled controls

Every action button and the close button carry an aria-label

Focus management

Focus moves to the close button on open and returns to the avatar trigger on close

Escape and outside-click

Escape and clicks outside the drawer close it

Decorative icons

The notification dot and Octicon spans are aria-hidden="true"

Focus indicators

:focus-visible outlines drawn with --ring

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

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