Components
Loading preview...
Responsive Design: Automatically opens on desktop (≥768px). Has a hamburger menu for mobile screens. On small screens, clicking outside the sidebar closes it. Collapsible Sidebar: Sidebar can be toggled between full and collapsed states using the collapse button. In collapsed mode, only icons are shown; tooltips appear on hover. When expanded, both icons and labels (with badges) are shown. Dynamic Navigation Items: Defined using the navigationItems array with icons (from lucide-react), names, paths, and optional badges. Clicking on an item updates the activeItem and auto-closes the sidebar on mobile. Active item gets a highlight. Profile and Logout Section: Displays a mock profile ("John Doe") with online status. Shows detailed info in expanded mode and minimal in collapsed mode. A logout button is placed at the bottom, styled distinctly in red. Search Bar: Appears only in expanded mode. Aesthetic input box for quick search functionality (visual only).