# Feature: Admin UI (platform) ## Purpose Authenticated application chrome: side navigation, top bar, and light/dark theme for Jetstream + product pages that use `AppLayout`. ## Boundaries - **Owns:** `Layouts/AppLayout.vue`, `Components/Admin/*` (`SideNav`, `SideNavLink`, `SideNavSection`, `ThemeToggle`, `AdminTopBar`), `Composables/useTheme.js`, Tailwind `darkMode: 'class'`, theme boot script in `resources/views/app.blade.php` - **Does not own:** Marketing layout, product domain pages’ business UI (Jobs/Customers content) - **Depends on (platform only):** Inertia, Jetstream auth/team props - **Depends on (other domains):** none — nav links to Jobs/Customers are platform touchpoints (same pattern as before) - **Removable?** No — shared authenticated shell ## Components | Component | Role | |-----------|------| | `SideNav` | Sidebar shell (brand / nav / footer slots); reusable | | `SideNavSection` | Optional labelled group of links | | `SideNavLink` | Active-aware nav item with optional `#icon` slot | | `ThemeToggle` | Light / Dark choice control | | `AdminTopBar` | Sticky header with mobile nav toggle + actions slot | Compose a custom sidebar by nesting `SideNavSection` / `SideNavLink` inside `SideNav` (see `AppLayout.vue`). ## Theme - Modes: `light` \| `dark` - Persistence: `localStorage` key `servdiary-theme` - Default: stored preference, else `prefers-color-scheme` - Applied via `dark` class on `` (FOUC script in `app.blade.php` + `useTheme()`) - Authenticated shell root uses `app-shell`; `resources/css/app.css` remaps common light-mode gray text/surface utilities under `.dark .app-shell` so Jetstream/product pages stay readable without per-class `dark:` variants. Shared buttons/modals also have explicit dark styles. ## Notes for agents - Prefer extending `Components/Admin/*` rather than hard-coding nav markup in pages. - Keep marketing pages on `MarketingLayout` (no side nav). - When adding a product domain, add a `SideNavLink` in `AppLayout` and document the touchpoint on that feature’s wiki page.