Sidebar Layout

1"use client"
2 
3import * as React from "react"
4 
5import { Separator } from "@/components/ui/separator"
6import { TooltipProvider } from "@/components/ui/tooltip"
7import { AppSidebar } from "@/hoogin/ui/app-sidebar"
8import {
9  SidebarInset,
10  SidebarProvider,
11  SidebarTrigger,
12} from "@/hoogin/ui/sidebar"
13import type {
14  SidebarBrand,
15  SidebarMore,
16  SidebarNavItem,
17  SidebarProject,
18  SidebarSecondaryItem,
19  SidebarUser,
20  SidebarUserMenu,
21} from "@/hoogin/ui/sidebar.types"
22import { ThemeToggle } from "@/hoogin/ui/theme-toggle"
23 
24type SidebarLayoutProps = {
25  children: React.ReactNode
26  breadcrumb?: React.ReactNode
27  brand: SidebarBrand
28  user?: SidebarUser
29  dataMain: SidebarNavItem[]
30  dataSecondary?: SidebarSecondaryItem[]
31  dataProjects?: SidebarProject[]
32  dataMainLabel?: string
33  dataProjectsLabel?: string
34  dataProjectsMore?: SidebarMore
35  dataUserMenu?: SidebarUserMenu
36  storageKey?: string
37  collapsible?: "offcanvas" | "icon" | "none"
38  className?: string
39}
40 
41export function SidebarLayout({
42  children,
43  breadcrumb,
44  brand,
45  user,
46  dataMain,
47  dataSecondary,
48  dataProjects,
49  dataMainLabel,
50  dataProjectsLabel,
51  dataProjectsMore,
52  dataUserMenu,
53  storageKey,
54  collapsible,
55  className,
56}: SidebarLayoutProps) {
57  const hasNestedItems = dataMain.some((item) =>
58    item.items?.some((sub) => sub.items?.length)
59  )
60 
61  return (
62    <TooltipProvider>
63      <SidebarProvider
64        storageKey={storageKey}
65        className={className}
66        style={
67          hasNestedItems
68            ? ({ "--sidebar-width": "20rem" } as React.CSSProperties)
69            : undefined
70        }
71      >
72        <AppSidebar
73          brand={brand}
74          user={user}
75          dataMain={dataMain}
76          dataSecondary={dataSecondary}
77          dataProjects={dataProjects}
78          dataMainLabel={dataMainLabel}
79          dataProjectsLabel={dataProjectsLabel}
80          dataProjectsMore={dataProjectsMore}
81          dataUserMenu={dataUserMenu}
82          collapsible={collapsible}
83        />
84        <SidebarInset>
85          <header className="flex h-16 shrink-0 items-center gap-2">
86            <div className="flex items-center gap-2 px-4">
87              <SidebarTrigger className="-ml-1" />
88              <Separator
89                orientation="vertical"
90                className="mr-2 data-vertical:h-4 data-vertical:self-auto"
91              />
92              {breadcrumb}
93            </div>
94            <div className="ml-auto flex items-center gap-2 px-4">
95// … truncated