Components
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).
Loading preview...
import {Sidebar} from "@/components/ui/modern-side-bar";
const DemoOne = () => {
return(
<div className="flex h-screen w-screen">
<Sidebar />
</div>
);
};
export { DemoOne };