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

CSS Variables

Vue SFC

Every sidebar is themed through --mono-sidebar-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-sidebar> and the shadow build. The density and color props set presets, but an explicit --mono-sidebar-* override always wins. To re-skin globally, set the underlying --theme-* tokens.

width / rail-width are usually set via the props (they're also exposed as --mono-sidebar-width / --mono-sidebar-rail-width). The separate --mono-sidebar-{left,right}-width on :root are the layout-padding values the sidebar writes for content wrappers.

Variable	Default	Controls
--mono-sidebar-accent	--theme-primary	Accent (scrollbar, rail toggle, painted bg); set by color
--mono-sidebar-bg	--theme-surface	Panel background (painted by non-surface colors)
--mono-sidebar-surface	--theme-surface	Panel / rail-toggle surface
--mono-sidebar-text	--theme-text	Panel text color
--mono-sidebar-text-soft	text 62%	Muted text / rail-toggle color
--mono-sidebar-border	--theme-border	outlined border + rail-toggle border
--mono-sidebar-border-lite	border 55%	Header/footer/topbar dividers
--mono-sidebar-width	264px	Expanded width (usually via width prop)
--mono-sidebar-rail-width	64px	Collapsed rail width (usually via rail-width prop)
--mono-sidebar-pad-x	0.85rem	Section horizontal padding (set by density)
--mono-sidebar-pad-y	0.85rem	Section vertical padding (set by density)
--mono-sidebar-gap	0.4rem	Rail-bar gap (set by density)
--mono-sidebar-shadow	accent glow	elevated shadow
--mono-sidebar-scrim-bg	rgba(15,25,45,.42)	temporary overlay scrim
--mono-sidebar-z	50	Panel z-index

Types

Importimport { SidebarProps } from 'mono-helper'

Prop	Value	Default	Description
modelValue	boolean	—	Controls whether the sidebar is open.
mode	'auto' | 'permanent' | 'temporary' | 'rail'	—	Display mode: permanent, temporary, rail, or auto.
location	'left' | 'right'	—	Side of the viewport the sidebar is anchored to.
density	'default' | 'compact' | 'comfortable'	—	Spacing density of the sidebar contents.
color	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'surface'	—	Color theme applied to the sidebar.
variant	'elevated' | 'outlined' | 'flat'	—	Visual style variant of the sidebar.
width	number	—	Expanded width of the sidebar in pixels.
railWidth	number	—	Collapsed rail width of the sidebar in pixels.
expandOnHover	boolean	—	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	—	Keep the sidebar within its parent rather than the viewport.
persistent	boolean	—	Prevent the sidebar from closing on scrim click or Escape.
closeOnEscape	boolean	—	Close the sidebar when the Escape key is pressed.
closeOnScrim	boolean	—	Close the sidebar when the scrim is clicked.
lockScroll	boolean	—	Lock page scroll while a temporary sidebar is open.
showScrim	boolean	—	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.