# Modern sideBar

> 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).

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/modern-side-bar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/modern-side-bar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt