Skip to content
aq-ui
Back to HooksHook

Use Sidebar

Open-code aq-ui React hook for Use Sidebar.

Installation

pnpm dlx aq-ui@alpha add use-sidebar

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useSidebar } from "@/hooks/use-sidebar"

const result = useSidebar()

SidebarControls

interfaceSource L28

Type contract for SidebarControls.

interface SidebarControls

Members

NameType
stateSidebarState
openboolean
setOpen(open: ControllableStateUpdater<boolean>) => void
openMobileboolean
setOpenMobile(open: ControllableStateUpdater<boolean>) => void
isMobileboolean
toggleSidebar() => void
closeSidebar() => void

SidebarState

typeSource L12

Type contract for SidebarState.

type SidebarState = "expanded" | "collapsed"

useSidebar

functionSource L39

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…): SidebarControls
Returns
SidebarControls

Parameters

NameTypeDefault
options?UseSidebarOptions{}
const result = useSidebar()

UseSidebarOptions

interfaceSource L14

Type contract for UseSidebarOptions.

interface UseSidebarOptions

Members

NameTypeDefault
open?boolean—
defaultOpen?booleantrue
onOpenChange?(open: boolean) => void—
openMobile?boolean—
defaultOpenMobile?booleanfalse
onOpenMobileChange?(open: boolean) => void—
mobileBreakpoint?number768
shortcut?string | false"mod+b"
persist?booleantrue
cookieName?string"sidebar_state"
cookieMaxAge?number60 * 60 * 24 * 7

Registry dependencies

use-breakpoint, use-controllable-state, use-hotkeys

Files

  • hooks/use-sidebar.ts

Source