---
estimated_steps: 22
estimated_files: 3
skills_used: []
---

# T01: Create AdminDropdown component, wire into header, add styles

Create an AdminDropdown React component, replace the 3 admin nav links and ModeToggle in App.tsx, and add dropdown CSS to App.css.

**Context:** The header in `App.tsx` currently has 6 flat `<Link>` elements (Home, Topics, Creators, Review, Reports, Pipeline) plus a `<ModeToggle />`. Goal: group the 3 admin links behind an "Admin" dropdown, remove ModeToggle from the header. ModeToggle is still used by `ReviewQueue.tsx` — do NOT delete the component or its CSS.

**Click-outside pattern** — adapt from `Home.tsx` (typeahead):
```tsx
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
  function handler(e: MouseEvent) {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setOpen(false);
    }
  }
  document.addEventListener("mousedown", handler);
  return () => document.removeEventListener("mousedown", handler);
}, []);
```

**CSS variables available** (all defined in App.css `:root`):
- Trigger text: `--color-text-on-header` / `--color-text-on-header-hover`
- Dropdown background: `--color-bg-surface`
- Border: `--color-border`
- Shadow: `--color-shadow-heavy`
- Item hover bg: `--color-bg-surface-hover`
- Item text: `--color-text-primary`

## Inputs

- ``frontend/src/App.tsx` — current header with 6 flat nav links + ModeToggle import to refactor`
- ``frontend/src/App.css` — existing header/nav styles and CSS custom properties (lines 146-175 for header, line 6+ for variables)`
- ``frontend/src/components/ModeToggle.tsx` — must NOT be deleted (still imported by ReviewQueue.tsx line 16)`
- ``frontend/src/pages/Home.tsx` — click-outside dropdown pattern (useRef + mousedown event listener) to adapt`

## Expected Output

- ``frontend/src/components/AdminDropdown.tsx` — new component: useState toggle, useRef click-outside, Escape key handler, `<button>` trigger with aria-expanded + aria-haspopup='true', dropdown `<div role='menu'>` with 3 `<Link role='menuitem'>` items (Review → /admin/review, Reports → /admin/reports, Pipeline → /admin/pipeline), close on link click`
- ``frontend/src/App.tsx` — ModeToggle import line removed, `<ModeToggle />` JSX removed, AdminDropdown imported, 3 admin `<Link>` elements replaced with `<AdminDropdown />`; remaining nav: Home, Topics, Creators as flat links`
- ``frontend/src/App.css` — new styles appended: `.admin-dropdown` (position: relative), `.admin-dropdown__trigger` (styled like nav links — same font-size, color, background:none, border:none, cursor:pointer, uses --color-text-on-header), `.admin-dropdown__menu` (position: absolute, top: 100%, right: 0, min-width: 10rem, background: var(--color-bg-surface), border: 1px solid var(--color-border), border-radius: 0.5rem, box-shadow, z-index: 100), `.admin-dropdown__item` (display: block, padding, color: var(--color-text-primary), hover: var(--color-bg-surface-hover))`

## Verification

cd frontend && npx tsc --noEmit && npx vite build
