Confirm?

Are you sure you want to proceed?
M
Markus Sothersby

Header with Collapsible Sidebar

Clone & Customize via AI

A responsive layout component that provides a collapsible left navigation and main content area. Blazor Collapsible Sidebar uses a Bootstrap layout with Font Awesome icons and a toggle for icon-only collapse.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Collapsible left sidebar navigation with icon-only collapse - Toggle button to collapse/expand the menu - Menu rendered from a List<MenuItemViewModel> with Font Awesome icons - Main content area with scrollable body and header bar ## Key components - Razor component: CollapsibleSideMenuLayout.razor - View model: MenuItemViewModel.cs - Markup elements: <button> with @onclick, foreach rendering of menu items, <a class="nav-link"> anchors - Scoped CSS: CollapsibleSideMenuLayout.razor.css (styles, transitions, responsive rules) ## How it works - State is held in a boolean (isMenuCollapsed) toggled by the ToggleMenu() method; UI updates via Blazor re-rendering. - MenuItems is a List<MenuItemViewModel> populated in OnInitialized and rendered with a foreach loop. - Icons are provided via MenuItemViewModel.IconClass strings (Font Awesome classes) inside <i> elements. - No EditForm or data annotations are present; there is no @bind-* usage in this page. ## Styling - Uses Bootstrap utility and component classes (btn, nav, nav-link, ms-2, me-2, flex-column, shadow-sm) for spacing and layout. - Font Awesome supplies the icons via the IconClass values. - CollapsibleSideMenuLayout.razor.css provides widths, transitions, colors, and responsive adjustments; the sidebar transitions width between 260px and ~70px. ## Reuse steps 1. Add MenuItemViewModel.cs and CollapsibleSideMenuLayout.razor to the project (Pages or Shared). 2. Ensure Bootstrap CSS is included in the app and add Font Awesome CSS (CDN or local) for the icons. 3. Keep CollapsibleSideMenuLayout.razor.css next to the .razor file to use scoped styles. 4. Replace placeholder Href values and wire NavigationManager or <NavLink> for route-aware active states. 5. Optionally persist isMenuCollapsed (localStorage) and add ARIA roles/keyboard handlers for accessibility. ## Limitations & next steps - This is a single layout component; authentication, data services, and global state management are not implemented here. - Active link highlighting is not wired to routing; switch to <NavLink> or inspect NavigationManager to set active class. - Accessibility (ARIA attributes, focus management) and mobile overlay behavior require additional implementation. - Consider adding persistence for collapsed state, animations, and unit/visual tests when integrating into an app.