Navigation System
Type-safe routing configuration, providing flexible and maintainable way to handle routing.
Key Features
🔒
Type-Safe Routes
Fully typed route definitions and parameters
🎯
Active State
Intelligent active route detection
🔄
Dynamic Paths
Support for dynamic route parameters
📱
Responsive
Adaptive navigation components
Route Configuration
Routes are defined in a type-safe configuration object that includes metadata, paths, and additional information for each route.
types.ts
TYPESCRIPT
Navigation Components
AppSidebar
The AppSidebar component provides a hierarchical navigation structure with categories and items.
app-sidebar.tsx
TSX
NavMain
The NavMain component renders navigation items with icons and active states.
components/global/nav-main
TSX
Route Helpers
createRoute
Creates a route with type-safe parameters
lib/utils.ts
TYPESCRIPT
redirectToRoute
Redirects to a route with proper typing
lib/utils.ts
TYPESCRIPT
isRouteActive
Determines if a route is currently active
lib/utils.ts
TYPESCRIPT
Best Practices
Route Definition
- 1Use type-safe route names
- 2Include proper metadata
- 3Define clear path patterns
- 4Document route parameters
Navigation Usage
- 1Leverage type checking
- 2Use helper functions
- 3Handle loading states
- 4Implement proper active states