diff --git a/frontend/src/App.css b/frontend/src/App.css index 11ba9ed..e1faa94 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -776,6 +776,53 @@ body { color: var(--color-text-on-header-hover); } +/* ── Admin dropdown ───────────────────────────────────────────────────────── */ + +.admin-dropdown { + position: relative; +} + +.admin-dropdown__trigger { + font-family: inherit; + font-size: 0.875rem; + color: var(--color-text-on-header); + background: none; + border: none; + cursor: pointer; + padding: 0; + transition: color 0.15s; +} + +.admin-dropdown__trigger:hover { + color: var(--color-text-on-header-hover); +} + +.admin-dropdown__menu { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + min-width: 10rem; + background: var(--color-bg-surface); + border: 1px solid var(--color-border); + border-radius: 0.5rem; + box-shadow: 0 4px 16px var(--color-shadow-heavy); + z-index: 100; + padding: 0.375rem 0; +} + +.admin-dropdown__item { + display: block; + padding: 0.5rem 1rem; + color: var(--color-text-primary); + text-decoration: none; + font-size: 0.875rem; + transition: background 0.12s; +} + +.admin-dropdown__item:hover { + background: var(--color-bg-surface-hover); +} + /* ── Home / Hero ──────────────────────────────────────────────────────────── */ .home-hero { diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e96014c..7cf0c8a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -9,7 +9,7 @@ import ReviewQueue from "./pages/ReviewQueue"; import MomentDetail from "./pages/MomentDetail"; import AdminReports from "./pages/AdminReports"; import AdminPipeline from "./pages/AdminPipeline"; -import ModeToggle from "./components/ModeToggle"; +import AdminDropdown from "./components/AdminDropdown"; export default function App() { return ( @@ -23,11 +23,8 @@ export default function App() { Home Topics Creators - Review - Reports - Pipeline + - diff --git a/frontend/src/components/AdminDropdown.tsx b/frontend/src/components/AdminDropdown.tsx new file mode 100644 index 0000000..f626c65 --- /dev/null +++ b/frontend/src/components/AdminDropdown.tsx @@ -0,0 +1,73 @@ +import { useEffect, useRef, useState } from "react"; +import { Link } from "react-router-dom"; + +export default function AdminDropdown() { + const [open, setOpen] = useState(false); + const dropdownRef = useRef(null); + + // Close on outside click + 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); + }, []); + + // Close on Escape + useEffect(() => { + function handler(e: KeyboardEvent) { + if (e.key === "Escape") setOpen(false); + } + if (open) { + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + } + }, [open]); + + return ( +
+ + {open && ( +
+ setOpen(false)} + > + Review + + setOpen(false)} + > + Reports + + setOpen(false)} + > + Pipeline + +
+ )} +
+ ); +}