feat: implement SidebarNav component with routing support and integrate into layout; update package dependencies

Author: hotlong

examples/crm-app/src/components/SidebarNav.tsx

@@ -1,29 +1,12 @@
 import React from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { cn } from '@object-ui/components';
 import { 
   LayoutDashboard, 
   Users, 
   Settings, 
   Package, 
   FileText 
 } from 'lucide-react';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-} from '@object-ui/components';
-
-export interface NavItem {
-  title: string;
-  href: string;
-  icon?: React.ComponentType<{ className?: string }>;
-}
+import { SidebarNav as SidebarNavLayout, NavItem } from '@object-ui/layout';
 
 export const mainNavItems: NavItem[] = [
   {
@@ -54,30 +37,9 @@ export const mainNavItems: NavItem[] = [
 ];
 
 export function SidebarNav({ items = mainNavItems }: { items?: NavItem[] }) {
-  const location = useLocation();
-
   return (
-    <Sidebar>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupLabel>Application</SidebarGroupLabel>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {items.map((item) => (
-                <SidebarMenuItem key={item.href}>
-                  <SidebarMenuButton asChild isActive={location.pathname === item.href}>
-                    <NavLink to={item.href}>
-                      {item.icon && <item.icon />}
-                      <span>{item.title}</span>
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-      </SidebarContent>
-    </Sidebar>
+    <SidebarNavLayout items={items} />
   );
 }
 
+

packages/layout/package.json

@@ -28,9 +28,11 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
+    "react-router-dom": "^7.13.0",
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

packages/layout/src/SidebarNav.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { 
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+} from '@object-ui/components';
+
+export interface NavItem {
+  title: string;
+  href: string;
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
+export interface SidebarNavProps {
+    items: NavItem[];
+    title?: string;
+    className?: string;
+}
+
+export function SidebarNav({ items, title = "Application", className }: SidebarNavProps) {
+  const location = useLocation();
+
+  return (
+    <Sidebar className={className}>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>{title}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.href}>
+                  <SidebarMenuButton asChild isActive={location.pathname === item.href}>
+                    <NavLink to={item.href}>
+                      {item.icon && <item.icon />}
+                      <span>{item.title}</span>
+                    </NavLink>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

packages/layout/src/index.ts

@@ -7,10 +7,12 @@ import { ComponentRegistry } from '@object-ui/core';
 import { PageHeader } from './PageHeader';
 import { AppShell } from './AppShell';
 import { Page } from './Page';
+import { SidebarNav } from './SidebarNav';
 
 export * from './PageHeader';
 export * from './AppShell';
 export * from './Page';
+export * from './SidebarNav';
 
 export function registerLayout() {
   ComponentRegistry.register('page-header', PageHeader, {

packages/layout/vite.config.ts

@@ -26,7 +26,8 @@ export default defineConfig({
         '@object-ui/types',
         'clsx',
         'tailwind-merge',
-        'lucide-react'
+        'lucide-react',
+        'react-router-dom'
       ],
     },
   },