feat: integrate Sidebar component into Layout and enhance SidebarNav with new structure; add tests for SidebarNav

Author: hotlong

examples/crm-app/src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Outlet, Link, useLocation } from 'react-router-dom';
+import { SidebarProvider, SidebarInset, SidebarTrigger } from '@object-ui/components';
 import { SchemaRendererProvider, SchemaRenderer, useRenderer } from '@object-ui/react';
 import { registerFields } from '@object-ui/fields';
 import { registerLayout } from '@object-ui/layout';
@@ -100,12 +101,19 @@ const contactsSchema = {
 // Layout Shell Component
 const Layout = () => {
   return (
-    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
-      <SidebarNav />
-      <main className="flex-1 overflow-y-auto p-8">
-        <Outlet />
-      </main>
-    </div>
+    <SidebarProvider>
+      <div className="flex min-h-screen w-full bg-gray-50 dark:bg-gray-900">
+        <SidebarNav />
+        <SidebarInset>
+          <div className="p-4">
+             <SidebarTrigger className="md:hidden" />
+          </div>
+          <main className="flex-1 overflow-y-auto p-4 md:p-8">
+            <Outlet />
+          </main>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
   );
 };
 

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

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { SidebarNav } from './SidebarNav';
+import { describe, it, expect } from 'vitest';
+import { SidebarProvider } from '@object-ui/components';
+import React from 'react';
+
+describe('SidebarNav', () => {
+    it('renders without crashing using default items', () => {
+        render(
+            <SidebarProvider>
+                <BrowserRouter>
+                    <SidebarNav />
+                </BrowserRouter>
+            </SidebarProvider>
+        );
+        expect(screen.getByText('Dashboard')).toBeDefined();
+    });
+
+    it('renders custom items if provided', () => {
+        const customItems = [
+            { title: 'Custom Link', href: '/custom' }
+        ];
+        render(
+             <SidebarProvider>
+                <BrowserRouter>
+                    <SidebarNav items={customItems} />
+                </BrowserRouter>
+            </SidebarProvider>
+        );
+        expect(screen.getByText('Custom Link')).toBeDefined();
+    });
+});
+

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

@@ -9,6 +9,8 @@ import {
   FileText 
 } from 'lucide-react';
 import {
+  Sidebar,
+  SidebarContent,
   SidebarGroup,
   SidebarGroupLabel,
   SidebarGroupContent,
@@ -51,26 +53,31 @@ export const mainNavItems: NavItem[] = [
   },
 ];
 
-export function SidebarNav({ items }: { items: NavItem[] }) {
+export function SidebarNav({ items = mainNavItems }: { items?: NavItem[] }) {
   const location = useLocation();
 
   return (
-    <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>
+    <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>
   );
 }
+