Navigation System

The navigation system is built on Next.js App Router with a type-safe routing configuration, providing a flexible and maintainable way to handle application 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.

type RouteConfigType = {
  path: string
  disabled?: boolean
  name: RouteName
  metadata: Metadata
  metadataExtra: {
    image?: string
    icon?: keyof typeof Icons
    name: string
  }
}

Navigation Components

AppSidebar

The AppSidebar component provides a hierarchical navigation structure with categories and items.

import { ROUTES } from "@/lib/routes"
            
const dashboardRoutes: RouteConfigType[] = [ROUTES.dashboard, ROUTES.analytics, ROUTES.items]

const miscRoutes: RouteConfigType[] = [
  {
    name: "settings-workspace",
    path: "/settings",
    metadata: {
      title: "Settings",
    },
    metadataExtra: {
      name: "Settings",
      icon: "settings",
    },
  },
]

NavMain (@/components/global/nav-main)

The NavMain component renders navigation items with icons and active states.

// Main routes
<NavMain 
routes={dashboardRoutes} 
slug={slug} 
label="Main routes" 
/>

// Misc routes
<NavMain 
routes={miscRoutes} 
slug={slug} 
className="mt-auto" 
label="Misc routes"
/>

Route Helpers (@/lib/routes)

createRoute

Creates a route with type-safe parameters

createRoute('dashboard', { slug: 'workspace-1' })

redirectToRoute

Redirects to a route with proper typing

redirectToRoute('settings', { slug: 'workspace-1' })

isRouteActive

Determines if a route is currently active

isRouteActive(routeHref, pathname, 1)