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).
npx shadcn@latest add https://21st.dev/r/uniquesonu/modern-side-barimport {Sidebar} from "@/components/ui/modern-side-bar";
const DemoOne = () => {
return(
<div className="flex h-screen w-screen">
<Sidebar />
</div>
);
};
export { DemoOne };