Centralized Sidebar Demo

Centralized Sidebar Features

Core Features
  • Single source of truth for sidebar
  • Consistent across all pages
  • Automatic state management
  • Keyboard shortcuts support
  • Search functionality
  • Responsive design
Technical Benefits
  • Easy maintenance
  • Reduced code duplication
  • Centralized updates
  • Better performance
  • Consistent UX
  • Future-proof architecture

How to Use

Include Script

Add the sidebar-manager.js script to your page

Add Container

Include the sidebarContainer div in your HTML

Auto-Initialize

The sidebar will automatically initialize

Keyboard Shortcuts

Ctrl + B Toggle sidebar collapse
Alt + D Go to Dashboard
Alt + P Go to Point of Sale
Esc Clear search
Click Navigate to pages
Search Filter menu items

API Reference

Global Functions
// Toggle sidebar
window.sidebarManager.toggleSidebarCollapse()

// Clear search
window.sidebarManager.clearSearch()

// Toggle group
window.sidebarManager.toggleGroup('patient-group')

// Update badge count
window.sidebarManager.updateBadgeCount('opd-count', 5)
Properties
// Check if loaded
window.sidebarManager.isLoaded

// Check if initialized
window.sidebarManager.isInitialized

// Get current page
window.sidebarManager.currentPage