App Sidebar

1"use client"
2 
3import * as React from "react"
4 
5import { NavMain } from "@/hoogin/ui/nav-main"
6import { NavProjects } from "@/hoogin/ui/nav-projects"
7import { NavSecondary } from "@/hoogin/ui/nav-secondary"
8import { NavUser } from "@/hoogin/ui/nav-user"
9import type {
10  SidebarBrand,
11  SidebarMore,
12  SidebarNavItem,
13  SidebarProject,
14  SidebarSecondaryItem,
15  SidebarUser,
16  SidebarUserMenu,
17} from "@/hoogin/ui/sidebar.types"
18import {
19  Sidebar,
20  SidebarContent,
21  SidebarFooter,
22  SidebarHeader,
23  SidebarMenu,
24  SidebarMenuButton,
25  SidebarMenuItem,
26} from "@/hoogin/ui/sidebar"
27import { BlocksIcon } from "lucide-react"
28 
29type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
30  brand: SidebarBrand
31  user?: SidebarUser
32  dataMain: SidebarNavItem[]
33  dataSecondary?: SidebarSecondaryItem[]
34  dataProjects?: SidebarProject[]
35  dataMainLabel?: string
36  dataProjectsLabel?: string
37  dataProjectsMore?: SidebarMore
38  dataUserMenu?: SidebarUserMenu
39}
40 
41export function AppSidebar({
42  brand,
43  user,
44  dataMain,
45  dataSecondary,
46  dataProjects,
47  dataMainLabel,
48  dataProjectsLabel,
49  dataProjectsMore,
50  dataUserMenu,
51  ...props
52}: AppSidebarProps) {
53  return (
54    <Sidebar variant="inset" {...props}>
55      <SidebarHeader>
56        <SidebarMenu>
57          <SidebarMenuItem>
58            <SidebarMenuButton size="lg" render={<a href="#" />}>
59              <div className="flex aspect-square size-8 items-center justify-center">
60                {typeof brand.logo === "string" ? (
61                  <img src={brand.logo} alt={brand.name} className="size-8" />
62                ) : brand.logo ? (
63                  brand.logo
64                ) : (
65                  <BlocksIcon className="size-4" />
66                )}
67              </div>
68              <div className="grid flex-1 text-left text-sm leading-tight">
69                <span className="truncate font-medium">{brand.name}</span>
70                {brand.description ? (
71                  <span className="truncate text-xs">{brand.description}</span>
72                ) : null}
73              </div>
74            </SidebarMenuButton>
75          </SidebarMenuItem>
76        </SidebarMenu>
77      </SidebarHeader>
78      <SidebarContent>
79        <NavMain items={dataMain} label={dataMainLabel} />
80        {dataProjects?.length ? (
81          <NavProjects
82            projects={dataProjects}
83            label={dataProjectsLabel}
84            more={dataProjectsMore}
85          />
86        ) : null}
87        {dataSecondary?.length ? (
88// … truncated