Sidebar
A Vuetify-style navigation drawer with four modes — permanent (always visible, pushes content), temporary (overlay drawer with scrim + Escape), rail (mini collapsed, optional expandOnHover), and auto (responsive: permanent on ≥ 768 px viewports, temporary below). Anchors left or right, three densities, three variants, seven colors. Three named slots — header, default (body), footer — designed to host a future <mono-menu> in the body. Writes its width to --mono-sidebar-{left,right}-width on :root so layout wrappers can pad themselves. Demos use the contained prop to position absolutely inside a scoped preview pane. Toggle Vue / CSS to switch the live demo and source together.
Permanent
Always-visible sidebar that pushes the main content area to the side.
Vue SFC
Temporary
Drawer-style sidebar with scrim — Escape, scrim-click, or close button dismiss.
Vue SFC
Rail
Mini collapsed sidebar (icons only); toggle expands to full width.
Vue SFC
Rail · expand on hover
Rail mode that auto-expands while the cursor is over it.
Vue SFC
Rail · manual control
Bind :rail to your own state and toggle it from any external button. The default chevron is hidden when the prop is provided.
Vue SFC
Location
Anchor left or right.
Vue SFC
Colors
Six themed accents plus the white surface default.
Vue SFC
Variants
flat (no shadow), elevated (shadow), outlined (border).
Vue SFC
With nav list
Sidebar housing a brand header, nav list, and footer — the typical app-shell composition.
Vue SFC
With iconify icons
Sidebar nav using mono-menu with i-mdi-* iconify classes — paints SVG masks via currentColor.
Vue SFC
Customized
Override per-element styling via cssClass (Vue) or utility classes (CSS).
Vue SFC
Types
Import
import { SidebarProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Controls whether the sidebar is open. |
mode | 'auto' | 'permanent' | 'temporary' | 'rail' | 'auto' | Display mode: permanent, temporary, rail, or auto. |
location | 'left' | 'right' | 'left' | Side of the viewport the sidebar is anchored to. |
density | 'default' | 'compact' | 'comfortable' | 'comfortable' | Spacing density of the sidebar contents. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface' | 'surface' | Color theme applied to the sidebar. |
variant | 'elevated' | 'outlined' | 'flat' | 'elevated' | Visual style variant of the sidebar. |
width | number | 264 | Expanded width of the sidebar in pixels. |
railWidth | number | 64 | Collapsed rail width of the sidebar in pixels. |
expandOnHover | boolean | false | Expand the rail on hover while collapsed. |
rail | null | boolean | — | External rail-state binding. Provide a boolean to take over the rail's expanded/collapsed state — clicking any external button you wire up can mutate the bound value to flip the sidebar. Setting this prop also **hides the default chevron toggle**, since you're controlling the state. Omit (the default `null`) to keep the built-in chevron toggle. |
contained | boolean | false | Keep the sidebar within its parent rather than the viewport. |
persistent | boolean | false | Prevent the sidebar from closing on scrim click or Escape. |
closeOnEscape | boolean | true | Close the sidebar when the Escape key is pressed. |
closeOnScrim | boolean | true | Close the sidebar when the scrim is clicked. |
lockScroll | boolean | true | Lock page scroll while a temporary sidebar is open. |
showScrim | boolean | true | Show the dimming scrim behind a temporary sidebar. |
cssClass | SidebarCssClass | {} | Custom CSS classes applied to internal sidebar parts. |
cssClassName | string | '' | Root-level class name applied to the sidebar. |