Skip to content

App Layout & Navigation ## Business Purpose Provide a consistent layout with sidebar navigation, authentication barrier, and proper routing for all authenticated pages. ## Current Behaviors - Root Layout: __root.tsx wraps the app with theme provider and query client.

  • Auth Layout: AuthLayout renders a centered card layout for login/signup pages AuthLayout.tsx:9.
  • Authenticated Layout: _layout.tsx provides sidebar, header, and main content area layout.tsx:14.
  • Sidebar: AppSidebar renders navigation links for dashboard, items, admin, settings AppSidebar.tsx:20.
  • Routing: Uses TanStack Router with route tree generated in routeTree.gen.ts routeTree.gen.ts:25.
  • Navigation Guards: Users not authenticated are redirected to login; admin-only routes check superuser role. ## Technical Implementation - Components: AppSidebar.tsx:20, AuthLayout.tsx:9, _layout.tsx:14-23.
  • Route Definitions: routeTree.gen.ts:25-64 auto-generated; manual routes in _layout/index.tsx, _layout/admin.tsx, _layout/items.tsx, _layout/settings.tsx.
  • Public Routes: login.tsx, signup.tsx, recover-password.tsx, reset-password.tsx.
  • Sidebar Components: Built using sidebar.tsx with subcomponents: SidebarProvider, SidebarMenu, SidebarMenuButton, etc.
  • Testing: E2E tests navigate through sidebar links (admin.spec.ts, items.spec.ts). ## Definition of Done - Sidebar links navigate to correct pages admin.spec.ts:7.
  • Auth layout appears on login/signup pages login.spec.ts:19.
  • Unauthenticated user is redirected to login when accessing protected routes (captured in E2E test).
  • Admin sidebar item is only visible to superusers admin.spec.ts:20.
  • Mobile sidebar triggers open/close (covered by Playwright viewport tests).