Open-code aq-ui React hook for Use Sidebar.
aq-uipnpm dlx aq-ui@alpha add use-sidebarImport the parts you need, then jump to an export for its contract.
"use client"
import { useSidebar } from "@/hooks/use-sidebar"
const result = useSidebar()Type contract for SidebarControls.
interface SidebarControls| Name | Type |
|---|---|
state | SidebarState |
open | boolean |
setOpen | (open: ControllableStateUpdater<boolean>) => void |
openMobile | boolean |
setOpenMobile | (open: ControllableStateUpdater<boolean>) => void |
isMobile | boolean |
toggleSidebar | () => void |
closeSidebar | () => void |
Type contract for SidebarState.
type SidebarState = "expanded" | "collapsed"Open-code aq-ui React hook for Use Sidebar.
function useSidebar({ open, defaultOpen = true, onOpenChange, openMobile, defaultOpenMobile = false, onOpenMobileChange, mobileBreakpoint = 768, shortcut = "mod+b", persist = true, cookieName = "sidebar_state", cookieMaxAge = 60 * 60 * 24 * 7, }: UseSidebarOp…): SidebarControlsSidebarControls| Name | Type | Default |
|---|---|---|
options? | UseSidebarOptions | {} |
Type contract for UseSidebarOptions.
interface UseSidebarOptions| Name | Type | Default |
|---|---|---|
open? | boolean | — |
defaultOpen? | boolean | true |
onOpenChange? | (open: boolean) => void | — |
openMobile? | boolean | — |
defaultOpenMobile? | boolean | false |
onOpenMobileChange? | (open: boolean) => void | — |
mobileBreakpoint? | number | 768 |
shortcut? | string | false | "mod+b" |
persist? | boolean | true |
cookieName? | string | "sidebar_state" |
cookieMaxAge? | number | 60 * 60 * 24 * 7 |
use-breakpoint, use-controllable-state, use-hotkeys