52 lines
2.2 KiB
TypeScript
52 lines
2.2 KiB
TypeScript
import * as React from "react"
|
|
import { cva } from "class-variance-authority"
|
|
|
|
export const SIDEBAR_COOKIE_NAME = "sidebar:state"
|
|
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
|
export const SIDEBAR_WIDTH = "16rem"
|
|
export const SIDEBAR_WIDTH_MOBILE = "18rem"
|
|
export const SIDEBAR_WIDTH_ICON = "3rem"
|
|
export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
|
|
|
export type SidebarContext = {
|
|
state: "expanded" | "collapsed"
|
|
open: boolean
|
|
setOpen: (open: boolean) => void
|
|
openMobile: boolean
|
|
setOpenMobile: (open: boolean) => void
|
|
isMobile: boolean
|
|
toggleSidebar: () => void
|
|
}
|
|
|
|
export const SidebarContext = React.createContext<SidebarContext | null>(null)
|
|
|
|
export function useSidebar() {
|
|
const context = React.useContext(SidebarContext)
|
|
if (!context) {
|
|
throw new Error("useSidebar must be used within a SidebarProvider.")
|
|
}
|
|
|
|
return context
|
|
}
|
|
|
|
export const sidebarMenuButtonVariants = cva(
|
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
|
outline:
|
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
|
},
|
|
size: {
|
|
default: "h-8 text-sm",
|
|
sm: "h-7 text-xs",
|
|
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
}
|
|
) |