Layout Demo
This page demonstrates the DashboardLayout component with a fully functional notification system.
Sidebar Features
- Collapsible on desktop (click arrow)
- Slide-out overlay on mobile
- Search/filter navigation (press /)
- Navigation sections with titles
- Active state highlighting
- Badge support on items
- External link indicator
- Quick links (list or icons mode)
- User info in footer
- Pinnable items (hover to see pin icon)
- Role-based section expansion
- Per-app preferences (appId prop)
Notification Features
- Click the bell icon to open
- Real-time unread badge count
- Filter by All / Unread / Read
- Mark all as read
- Click notification for details
- Mark individual as read/unread
- Delete notifications
- Action links in notifications
- Priority & type badges
- Relative timestamps
Header Search
- Press Cmd/Ctrl+K to open
- Or click the search button in header
- Type to search pages & settings
- Use arrow keys to navigate results
- Press Enter to select
- Press Escape to close
- Backend-agnostic (callback-based)
Try It Out
- Click the bell icon for notifications
- Press Cmd/Ctrl+K to open search
- Try searching: "report", "settings", "help"
- Hover over nav items to see pin icon
- Click the bookmark icon to pin items
- Note: "Administration" auto-expanded (admin role)
- Resize browser to see mobile layout
- Click collapse button on desktop
Current State (from sidebarStore)
Sidebar Open: Yes
Mobile Mode: No
Unread Notifications: 3
Pinned Items: None (hover over items and click bookmark to pin)