LogoNEXTDEVKIT Docs

Sidebar Configuration

Configure application sidebar navigation and menu structure

NEXTDEVKIT provides a flexible sidebar configuration system for application navigation. The sidebar configuration is located in src/config/sidebar.tsx and supports nested menu structures with icons and internationalization.

🔧 Sidebar Structure

The sidebar system supports hierarchical navigation with icons and nested items:

export function getSidebarLinks(): SidebarNestedNavItem[] {
  const t = useTranslations("menu");

  return [
    {
      title: t("application.title"),
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
      items: [
        {
          title: t("application.dashboard.title"),
          icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
          href: "/app/dashboard",
        },
      ],
    },
  ];
}

📋 Sidebar Types

SidebarNavItem Interface

export type SidebarNavItem = {
  title: string;
  icon?: ReactNode;
  href?: string;
};
PropertyTypeDescription
titlestringDisplay text for the navigation item
iconReactNode (optional)React icon component
hrefstring (optional)Navigation link URL

SidebarNestedNavItem Interface

export type SidebarNestedNavItem = SidebarNavItem & {
  items?: SidebarNavItem[];
};
PropertyTypeDescription
titlestringDisplay text for the navigation section
iconReactNode (optional)React icon component
hrefstring (optional)Navigation link URL
itemsSidebarNavItem[] (optional)Array of nested navigation items

🌍 Internationalization Support

All sidebar items support internationalization:

// Sidebar translations in messages/en.json
{
  "menu": {
    "application": {
      "title": "Application",
      "dashboard": {
        "title": "Dashboard"
      },
      "settings": {
        "title": "Settings"
      },
      "analytics": {
        "title": "Analytics"
      }
    },
    "admin": {
      "title": "Admin",
      "users": {
        "title": "Users"
      },
      "system": {
        "title": "System"
      }
    }
  }
}

🔧 Adding New Sidebar Sections

Step 1: Add Translation Keys

// messages/en.json
{
  "menu": {
    "application": {
      "title": "Application",
      "dashboard": {
        "title": "Dashboard"
      }
    },
    "analytics": {
      "title": "Analytics",
      "overview": {
        "title": "Overview"
      },
      "reports": {
        "title": "Reports"
      },
      "insights": {
        "title": "Insights"
      }
    }
  }
}

Step 2: Update Sidebar Configuration

import { 
  LayoutDashboardIcon, 
  ChartBarIcon, 
  FileTextIcon, 
  BrainIcon 
} from "lucide-react";

export function getSidebarLinks(): SidebarNestedNavItem[] {
  const t = useTranslations("menu");

  return [
    {
      title: t("application.title"),
      icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
      items: [
        {
          title: t("application.dashboard.title"),
          icon: <LayoutDashboardIcon className="size-4 shrink-0" />,
          href: "/app/dashboard",
        },
      ],
    },
    {
      title: t("analytics.title"),
      icon: <ChartBarIcon className="size-4 shrink-0" />,
      items: [
        {
          title: t("analytics.overview.title"),
          icon: <ChartBarIcon className="size-4 shrink-0" />,
          href: "/app/analytics/overview",
        },
        {
          title: t("analytics.reports.title"),
          icon: <FileTextIcon className="size-4 shrink-0" />,
          href: "/app/analytics/reports",
        },
        {
          title: t("analytics.insights.title"),
          icon: <BrainIcon className="size-4 shrink-0" />,
          href: "/app/analytics/insights",
        },
      ],
    },
  ];
}