motovaultpro/frontend/src/pages/GuidePage/CLAUDE.md

frontend/src/pages/GuidePage/

Public-facing user guide page at /guide. Renders docs/USER-GUIDE.md content as styled React components with screenshots.

Files

File	What	When to read
GuidePage.tsx	Main page component with layout, nav bar, and section rendering	Modifying page structure or navigation
GuideTableOfContents.tsx	Sticky sidebar TOC (desktop) / collapsible accordion TOC (mobile)	Modifying TOC behavior or styling
guideTypes.ts	Section metadata (id, title, subSections) used by TOC and anchors	Adding/renaming sections

Subdirectories

Directory	What	When to read
components/	Shared components (GuideScreenshot, GuideTable)	Modifying screenshot or table rendering
sections/	10 content section components (one per guide chapter)	Updating guide content

Architecture

• Static JSX components (no react-markdown dependency); content changes require editing section files directly
• Each section is 150-250 lines of JSX; individual files prevent a 2000+ line monolith
• GuideScreenshot provides consistent lazy loading (loading="lazy"), responsive sizing, and WebP support across all sections
• GuideTable renders MUI Table from headers[] and rows[][] arrays, preventing verbose MUI Table boilerplate in each section
• The page has its own public nav bar (matching HomePage style) because it is accessible without authentication
• /guide route is detected in App.tsx and rendered outside the authenticated /garage/* shell

Key Patterns

• Section anchor IDs must match guideTypes.ts section IDs for TOC smooth scroll to work
• Screenshots stored in frontend/public/guide/ as static assets with loading="lazy"
• TOC uses window.innerWidth < 768 breakpoint: sidebar on desktop, MUI Accordion on mobile
• Guide link in HamburgerDrawer uses window.location.href (not Zustand navigation) because /guide is outside the /garage/* shell