Skip to main content

Sidebar

frontend/packages/ui/src/components/sidebar.tsx

useSidebar​

Hook

function useSidebar()

SidebarProvider​

Component

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
  style,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  defaultOpen?: boolean
  open?: boolean
  onOpenChange?: (open: boolean) => void
})

Component

function Sidebar({
  side = "left",
  variant = "sidebar",
  collapsible = "offcanvas",
  className,
  children,
  dir,
  ...props
}: React.ComponentProps<"div"> & {
  side?: "left" | "right"
  variant?: "sidebar" | "floating" | "inset"
  collapsible?: "offcanvas" | "icon" | "none"
})

SidebarTrigger​

Component

function SidebarTrigger({
  className,
  onClick,
  ...props
}: React.ComponentProps<typeof Button>)

SidebarRail​

Component

function SidebarRail({ className, ...props }: React.ComponentProps<"button">)

SidebarInset​

Component

function SidebarInset({ className, ...props }: React.ComponentProps<"main">)

SidebarInput​

Component

function SidebarInput({
  className,
  ...props
}: React.ComponentProps<typeof Input>)

SidebarHeader​

Component

function SidebarHeader({ className, ...props }: React.ComponentProps<"div">)

SidebarFooter​

Component

function SidebarFooter({ className, ...props }: React.ComponentProps<"div">)

SidebarSeparator​

Component

function SidebarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof Separator>)

SidebarContent​

Component

function SidebarContent({ className, ...props }: React.ComponentProps<"div">)

SidebarGroup​

Component

function SidebarGroup({ className, ...props }: React.ComponentProps<"div">)

SidebarGroupLabel​

Component

function SidebarGroupLabel({
  className,
  render,
  ...props
}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">)

SidebarGroupAction​

Component

function SidebarGroupAction({
  className,
  render,
  ...props
}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">)

SidebarGroupContent​

Component

function SidebarGroupContent({
  className,
  ...props
}: React.ComponentProps<"div">)

SidebarMenu​

Component

function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">)

SidebarMenuItem​

Component

function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">)

SidebarMenuButton​

Component

function SidebarMenuButton({
  render,
  isActive = false,
  variant = "default",
  size = "default",
  tooltip,
  className,
  ...props
}: useRender.ComponentProps<"button"> &
  React.ComponentProps<"button"> & {
    isActive?: boolean
    tooltip?: string | React.ComponentProps<typeof TooltipContent>
  } & VariantProps<typeof sidebarMenuButtonVariants>)

SidebarMenuAction​

Component

function SidebarMenuAction({
  className,
  render,
  showOnHover = false,
  ...props
}: useRender.ComponentProps<"button"> &
  React.ComponentProps<"button"> & {
    showOnHover?: boolean
  })

SidebarMenuBadge​

Component

function SidebarMenuBadge({
  className,
  ...props
}: React.ComponentProps<"div">)

SidebarMenuSkeleton​

Component

function SidebarMenuSkeleton({
  className,
  showIcon = false,
  ...props
}: React.ComponentProps<"div"> & {
  showIcon?: boolean
})

SidebarMenuSub​

Component

function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">)

SidebarMenuSubItem​

Component

function SidebarMenuSubItem({
  className,
  ...props
}: React.ComponentProps<"li">)

SidebarMenuSubButton​

Component

function SidebarMenuSubButton({
  render,
  size = "md",
  isActive = false,
  className,
  ...props
}: useRender.ComponentProps<"a"> &
  React.ComponentProps<"a"> & {
    size?: "sm" | "md"
    isActive?: boolean
  })