Sidebar

SidebarLayout renders a .sidebar-layout wrapper and enhances a hand-authored .sidebar panel, optional .sidebar-backdrop, and .sidebar-close inside it — four built-in layout behaviors (beside/over/fixed/under-navbar), outside-click/Escape, focus trapping on mobile overlays, and URL-based active-item detection. Compound subcomponents (Sidebar, SidebarHeader, SidebarBody, SidebarSection, SidebarItem, SidebarFooter, SidebarMain) remove the markup boilerplate, but hand-authoring the raw .sidebar-* tree works exactly the same.

Usage


import {
  SidebarLayout, Sidebar, SidebarHeader, SidebarBody,
  SidebarSection, SidebarItem, SidebarMain, SidebarToggle,
} from '@mav-labs-inc/mavkit-react'
 
// Uncontrolled, closed by default
<SidebarLayout variant="over" position="end">
  <Sidebar>
    <SidebarHeader title="Menu" />
    <SidebarBody>
      <SidebarSection label="Main">
        <SidebarItem href="/" active>Home</SidebarItem>
      </SidebarSection>
    </SidebarBody>
  </Sidebar>
  <SidebarMain>
    <SidebarToggle>Menu</SidebarToggle>
    …
  </SidebarMain>
</SidebarLayout>
 
// Controlled, like Modal
<SidebarLayout variant="over" open={isOpen} onOpenChange={setIsOpen}>…</SidebarLayout>

Example

variant="over" — click “Menu” to open the panel over the content.

Props

SidebarLayout

Prop	Type	Default	Description
variant	'beside' \| 'over' \| 'fixed' \| 'under-navbar'	—	One of the four built-in layout behaviors.
position	'start' \| 'end'	'start'	Which edge the panel is anchored to.
open	boolean	—	Controlled open state — call onOpenChange to flip it, mirroring Modal's open/onClose.
onOpenChange	(open: boolean) => void	—
defaultOpen	boolean	false	Uncontrolled mode only — initial open state.
closeOnOutside	boolean	true
closeOnEscape	boolean	true
mobileBackdrop	boolean	true	Whether fixed shows the dark backdrop once it collapses to a mobile drawer (≤768px). No effect on beside (never a backdrop) or over/under-navbar (always one).
onOpened	() => void	—
onClosed	() => void	—
className	string	—
ref	Ref<SidebarController>	—	{ isOpen, panelId, open(), close(), toggle() }

Sidebar

Renders the sliding panel + its backdrop as siblings (a Fragment).

Prop	Type	Default	Description
id	string	—	Auto-generated if omitted.
ariaLabel	string	'Navigation'	Ignored if aria-labelledby is set.
aria-labelledby	string	—
className	string	—

SidebarHeader

Prop	Type	Default	Description
title	ReactNode	—
showClose	boolean	true	Show the built-in .sidebar-close button.
children	ReactNode	—	Overrides title entirely — the close button (if showClose) still renders after it.

SidebarSection

Prop	Type	Default	Description
label	ReactNode	—	Uppercase group heading. Omit for an unlabeled group.

SidebarItem

Renders an <a> when href is given (auto-closes an overlay panel on click), otherwise a <button type="button"> for non-navigation actions.

Prop	Type	Default	Description
active	boolean	—	Marks this item as the current page.
disabled	boolean	—
icon	ReactNode	—
badge	ReactNode	—
href	string	—	Renders an <a> instead of a <button>.

Also accepts every native <a>/<button> attribute (whichever it renders).

SidebarBody / SidebarFooter / SidebarMain

Thin wrappers rendering .sidebar-body / .sidebar-footer / .sidebar-main — accept only className/children.

SidebarToggle

Companion toggle button consuming the enclosing SidebarLayout context (or an explicit controller prop for a toggle rendered outside it).

Prop	Type	Default	Description
controller	SidebarController \| null	—	Pass a layout ref's controller when the toggle lives outside SidebarLayout.

Also accepts every native <button> attribute.

`useSidebar()`

Access the enclosing SidebarLayout controller — for building a custom toggle.