# 04. Layout Components — Navbar, Footer, PageContainer, AppShell

meta:
  id: shieldai-unified-restructure-04
  feature: shieldai-unified-restructure
  priority: P0
  depends_on: [shieldai-unified-restructure-01, shieldai-unified-restructure-02, shieldai-unified-restructure-03]
  tags: [frontend, layout, navigation, solidjs]

objective:
- Build the structural layout components that wrap every page: a responsive navbar with navigation and auth state, a footer, a page container for consistent padding/max-width, and an AppShell that composes them all with the theme background.

deliverables:
- `web/src/components/layout/Navbar.tsx` — Responsive nav with:
  - ShieldAI logo/wordmark (SVG)
  - Navigation links: Features, Pricing, Blog, Dashboard
  - Auth buttons: Sign In (secondary), Get Started (primary)
  - Mobile hamburger menu with slide-out drawer
  - Theme toggle button (light/dark/system)
  - Scroll-aware background blur/glass effect when scrolled
- `web/src/components/layout/Footer.tsx` — Multi-column footer with:
  - Logo and tagline
  - Link columns: Product, Company, Resources, Legal
  - Social links (GitHub, Twitter/X, LinkedIn placeholders)
  - Copyright and privacy/terms links
- `web/src/components/layout/PageContainer.tsx` — Wrapper with:
  - `max-width` and centered layout
  - Responsive horizontal padding (`px-4 md:px-6 lg:px-8`)
  - Optional vertical padding prop
  - `class` prop for additional overrides
- `web/src/components/layout/AppShell.tsx` — Root layout component:
  - Renders `<Navbar />`, `<main>{children}</main>`, `<Footer />`
  - Applies dot-grid background to main content area
  - Handles scroll-to-top on route change
  - Wraps with `MetaProvider` and `Title`
- `web/src/components/layout/index.ts` — Barrel export.

steps:
1. Create `web/src/components/layout/` directory.
2. **Navbar**:
   - Use SolidJS `createSignal` for mobile menu open state
   - Use `onMount` + scroll listener to toggle `scrolled` class for glass effect
   - Logo: create a simple SVG shield icon with gradient fill (reference Lendair's logo approach)
   - Links use `<A>` from `@solidjs/router` for SPA navigation
   - Theme toggle uses `useTheme()` hook from task 02
   - Auth buttons conditionally render based on auth state (stub for now, wire in task 23)
3. **Footer**:
   - Grid layout: 4 columns on desktop, 2 on tablet, 1 on mobile
   - Link groups as data arrays mapped with `<For>`
   - Bottom bar with copyright text
4. **PageContainer**:
   - Simple wrapper `div` with `max-w-7xl mx-auto` and padding classes
   - Accept `class` prop and merge with defaults
5. **AppShell**:
   - Import `MetaProvider`, `Title` from `@solidjs/meta`
   - Import `Navbar`, `Footer`
   - Render children inside `<main>` with `min-h-screen`
   - Add `onCleanup` to remove scroll listener if added in Navbar
   - Use SolidStart `root` pattern: this becomes the `root` component passed to `<Router>`
6. Wire AppShell into `web/src/app.tsx` as the Router root.
7. Create barrel export.

steps:
- Unit: Navbar renders all links; mobile menu toggles
- Unit: Footer renders all link columns
- Unit: PageContainer applies correct max-width and padding classes
- Unit: AppShell renders Navbar + children + Footer in correct order
- Visual: Resize browser to verify responsive breakpoints

acceptance_criteria:
- [ ] Navbar is sticky/fixed at top with glass effect on scroll
- [ ] Mobile hamburger menu opens/closes smoothly
- [ ] Theme toggle button changes theme immediately
- [ ] Footer is responsive and all links are clickable
- [ ] PageContainer centers content with consistent padding
- [ ] AppShell wraps all routes correctly via SolidStart `root`
- [ ] No layout shift on initial load

validation:
- `cd web && pnpm test` passes layout tests
- Open `http://localhost:3000` and verify navbar/footer render on all routes
- Test mobile viewport (<768px) and verify hamburger menu works
- Toggle theme and verify navbar/footer colors shift correctly

notes:
- Reference Lendair: `~/code/Lendair/web/src/components/layout/Navbar.tsx`, `Footer.tsx`, `PageContainer.tsx`
- The AppShell replaces the current `app.tsx` Router root. Make sure `<FileRoutes />` still works inside it.
- For auth state in Navbar, create a stub `useAuth()` hook that returns `{ isAuthenticated: false }` for now; it will be wired to tRPC in task 23.
- Keep the Navbar height consistent to avoid layout shift when the glass effect activates.