next.js搭建路由01

crop-x/src/components/app-sidebar.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
+import Link from "next/link"
 
 import { SearchForm } from "@/components/search-form"
 import { VersionSwitcher } from "@/components/version-switcher"
@@ -21,9 +22,28 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar"
 
-// This is sample data.
-const data = {
-  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+// Define the interface for menu data
+interface MenuItem {
+  title: string
+  url: string
+  isActive?: boolean
+}
+
+interface NavMainItem {
+  title: string
+  url: string
+  icon?: string
+  items: MenuItem[]
+}
+
+interface SidebarData {
+  navMain: NavMainItem[]
+  versions?: string[]
+}
+
+// Default data - used when no external data is provided
+const defaultData: SidebarData = {
+  versions: ["1.0.0", "2.0.0"],
   navMain: [
     {
       title: "Getting Started",
@@ -64,34 +84,6 @@ const data = {
           title: "Styling",
           url: "#",
         },
-        {
-          title: "Optimizing",
-          url: "#",
-        },
-        {
-          title: "Configuring",
-          url: "#",
-        },
-        {
-          title: "Testing",
-          url: "#",
-        },
-        {
-          title: "Authentication",
-          url: "#",
-        },
-        {
-          title: "Deploying",
-          url: "#",
-        },
-        {
-          title: "Upgrading",
-          url: "#",
-        },
-        {
-          title: "Examples",
-          url: "#",
-        },
       ],
     },
     {
@@ -106,76 +98,31 @@ const data = {
           title: "File Conventions",
           url: "#",
         },
-        {
-          title: "Functions",
-          url: "#",
-        },
-        {
-          title: "next.config.js Options",
-          url: "#",
-        },
-        {
-          title: "CLI",
-          url: "#",
-        },
-        {
-          title: "Edge Runtime",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Architecture",
-      url: "#",
-      items: [
-        {
-          title: "Accessibility",
-          url: "#",
-        },
-        {
-          title: "Fast Refresh",
-          url: "#",
-        },
-        {
-          title: "Next.js Compiler",
-          url: "#",
-        },
-        {
-          title: "Supported Browsers",
-          url: "#",
-        },
-        {
-          title: "Turbopack",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Community",
-      url: "#",
-      items: [
-        {
-          title: "Contribution Guide",
-          url: "#",
-        },
       ],
     },
   ],
 }
 
-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  data?: SidebarData
+}
+
+export function AppSidebar({ data, ...props }: AppSidebarProps) {
+  // Use external data if provided, otherwise use default data
+  const sidebarData = data || defaultData
+
   return (
     <Sidebar {...props}>
       <SidebarHeader>
         <VersionSwitcher
-          versions={data.versions}
-          defaultVersion={data.versions[0]}
+          versions={sidebarData.versions || defaultData.versions}
+          defaultVersion={sidebarData.versions?.[0] || defaultData.versions[0]}
         />
         <SearchForm />
       </SidebarHeader>
       <SidebarContent className="gap-0">
         {/* We create a collapsible SidebarGroup for each parent. */}
-        {data.navMain.map((item) => (
+        {sidebarData.navMain.map((item) => (
           <Collapsible
             key={item.title}
             title={item.title}
@@ -188,17 +135,24 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
-                  {item.title}{" "}
-                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  <div className="flex items-center">
+                    {item.icon && <span className="mr-2">{item.icon}</span>}
+                    {item.title}
+                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </div>
                 </CollapsibleTrigger>
               </SidebarGroupLabel>
               <CollapsibleContent>
                 <SidebarGroupContent>
                   <SidebarMenu>
-                    {item.items.map((item) => (
-                      <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild isActive={item.isActive}>
-                          <a href={item.url}>{item.title}</a>
+                    {item.items.map((subItem) => (
+                      <SidebarMenuItem key={subItem.title}>
+                        <SidebarMenuButton asChild isActive={subItem.isActive}>
+                          {subItem.url.startsWith('#') ? (
+                            <a href={subItem.url}>{subItem.title}</a>
+                          ) : (
+                            <Link href={subItem.url}>{subItem.title}</Link>
+                          )}
                         </SidebarMenuButton>
                       </SidebarMenuItem>
                     ))}