Design a modern collapsible sidebar navigation.
Width:
Dashboard
Khách hàng
Booking
Visual Design:
Minimal background
Hover: bg-muted
Active: primary/10 background
Left accent bar (3px)
Rounded-lg clickable items
Uppercase small group label
Lucide icons
Enhance with:
Notification badges
Smooth collapse animation
Dark mode support
Now I'll enhance the sidebar to match your exact specifications with the complete menu structure, multi-level nesting, notification badges, and refined visual design:
I've completely redesigned the sidebar with the following enhancements:
Key Features Implemented:
The nested structure now properly handles complex hierarchies like Booking → Booking Số Lượng → 6 child items, making the Vietnamese business workflow intuitive to navigate.
I'll fix the routing so all sidebar pages are accessible while maintaining the layout. Let me first check the current structure:
Now I understand the issue. The problem is that pages outside /dashboard don't have the layout wrapper. I need to restructure so all pages share the same layout. Let me create the proper routing structure:
Now let me update the root layout to include the DashboardLayout:
Now let me update all the layout files to just pass through children:
I've fixed the routing issue. Here's what I did:
Changes Made:
DashboardLayout component, so the sidebar, topbar, and layout are now globally applied to every pageNow all pages are accessible through the sidebar navigation while maintaining the persistent sidebar, topbar, and layout structure across the entire application. Every route defined in the sidebar will work and display with the proper dashboard layout.
You can send messages while the preview loads