侧边栏配置

NEXTDEVKIT 为应用程序导航提供了灵活的侧边栏配置系统。侧边栏配置位于 src/config/sidebar.tsx，支持带图标和国际化的嵌套菜单结构。

🔧 侧边栏结构

登录成功后，APP 侧边栏系统支持带图标和嵌套项目的分层导航：

src/config/sidebar.tsx

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",
        },
      ],
    },
  ];
}

📋 侧边栏类型

SidebarNavItem 接口

export type SidebarNavItem = {
  title: string;
  icon?: ReactNode;
  href?: string;
};

属性	类型	描述
`title`	`string`	导航项的显示文本
`icon`	`ReactNode` (可选)	React 图标组件
`href`	`string` (可选)	导航链接URL

SidebarNestedNavItem 接口

export type SidebarNestedNavItem = SidebarNavItem & {
  items?: SidebarNavItem[];
};

属性	类型	描述
`title`	`string`	导航部分的显示文本
`icon`	`ReactNode` (可选)	React 图标组件
`href`	`string` (可选)	导航链接URL
`items`	`SidebarNavItem[]` (可选)	嵌套导航项数组

🌍 国际化支持

所有侧边栏项都支持国际化：

// messages/en.json中的侧边栏翻译
{
  "menu": {
    "application": {
      "title": "应用程序",
      "dashboard": {
        "title": "仪表板"
      },
      "settings": {
        "title": "设置"
      },
      "analytics": {
        "title": "分析"
      }
    },
    "admin": {
      "title": "管理",
      "users": {
        "title": "用户"
      },
      "system": {
        "title": "系统"
      }
    }
  }
}

🔧 添加新的侧边栏部分

步骤 1：添加翻译键

// messages/en.json
{
  "menu": {
    "application": {
      "title": "应用程序",
      "dashboard": {
        "title": "仪表板"
      }
    },
    "analytics": {
      "title": "分析",
      "overview": {
        "title": "概览"
      },
      "reports": {
        "title": "报告"
      },
      "insights": {
        "title": "洞察"
      }
    }
  }
}

步骤 2：更新侧边栏配置

src/config/sidebar.tsx

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",
        },
      ],
    },
  ];
}

On this page