ui Architecture Docs
Home / File/ sidebar.tsx — ui Source File

sidebar.tsx — ui Source File

Architecture documentation for sidebar.tsx, a tsx file in the ui codebase. 13 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 13 imports 25 functions

Entity Profile

Dependency Diagram

graph LR
  91f6d996_a9f5_b129_3201_f8eee4d8cf65["sidebar.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  9c25e96d_58e7_da5f_38f2_06bde0124112["merge-props"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 9c25e96d_58e7_da5f_38f2_06bde0124112
  54befa66_d51c_07e2_ec3f_848afbcd88a7["use-render"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 54befa66_d51c_07e2_ec3f_848afbcd88a7
  25383e8d_ca91_a50e_c3a8_5f228d02e1df["class-variance-authority"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 25383e8d_ca91_a50e_c3a8_5f228d02e1df
  4f6835e8_2b87_b512_6233_885e8d7581c0["use-mobile"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 4f6835e8_2b87_b512_6233_885e8d7581c0
  8ad666ec_1b20_adda_0392_87a60bdb3a68["utils"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 8ad666ec_1b20_adda_0392_87a60bdb3a68
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 106d51d9_3961_e810_478c_8a9c54987d20
  a3c00059_fa03_cf5e_4e2a_284c527e1995["separator"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> a3c00059_fa03_cf5e_4e2a_284c527e1995
  1245aa1b_8939_064e_453d_c3383601eb22["sheet"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 1245aa1b_8939_064e_453d_c3383601eb22
  ec7b3976_34ea_1d29_d37a_b602bd34823b["skeleton"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> ec7b3976_34ea_1d29_d37a_b602bd34823b
  2b4184c3_5c46_f908_0cc6_fa22dfa7c663["tooltip"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> 2b4184c3_5c46_f908_0cc6_fa22dfa7c663
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  91f6d996_a9f5_b129_3201_f8eee4d8cf65 --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 91f6d996_a9f5_b129_3201_f8eee4d8cf65 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"

import { useIsMobile } from "@/registry/bases/base/hooks/use-mobile"
import { cn } from "@/registry/bases/base/lib/utils"
import { Button } from "@/registry/bases/base/ui/button"
import { Input } from "@/registry/bases/base/ui/input"
import { Separator } from "@/registry/bases/base/ui/separator"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/registry/bases/base/ui/sheet"
import { Skeleton } from "@/registry/bases/base/ui/skeleton"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/bases/base/ui/tooltip"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContextProps = {
  state: "expanded" | "collapsed"
  open: boolean
  setOpen: (open: boolean) => void
  openMobile: boolean
  setOpenMobile: (open: boolean) => void
  isMobile: boolean
  toggleSidebar: () => void
}

const SidebarContext = React.createContext<SidebarContextProps | null>(null)

function useSidebar() {
  const context = React.useContext(SidebarContext)
  if (!context) {
    throw new Error("useSidebar must be used within a SidebarProvider.")
  }

  return context
}

function SidebarProvider({
  defaultOpen = true,
  open: openProp,
  onOpenChange: setOpenProp,
  className,
// ... (670 more lines)

Domain

Subdomains

Functions

Types

Dependencies

  • button
  • class-variance-authority
  • icon-placeholder
  • input
  • merge-props
  • react
  • separator
  • sheet
  • skeleton
  • tooltip
  • use-mobile
  • use-render
  • utils

Source

Frequently Asked Questions

What does sidebar.tsx do?
sidebar.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in sidebar.tsx?
sidebar.tsx defines 25 function(s): Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, and 15 more.
What does sidebar.tsx depend on?
sidebar.tsx imports 13 module(s): button, class-variance-authority, icon-placeholder, input, merge-props, react, separator, sheet, and 5 more.
Where is sidebar.tsx in the architecture?
sidebar.tsx is located at apps/v4/registry/bases/base/ui/sidebar.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free