@@ -2,10 +2,30 @@ import { Breadcrumbs } from '@/components/breadcrumbs';
22import { Icon } from '@/components/icon' ;
33import { Avatar , AvatarFallback , AvatarImage } from '@/components/ui/avatar' ;
44import { Button } from '@/components/ui/button' ;
5- import { DropdownMenu , DropdownMenuContent , DropdownMenuTrigger } from '@/components/ui/dropdown-menu' ;
6- import { NavigationMenu , NavigationMenuItem , NavigationMenuList , navigationMenuTriggerStyle } from '@/components/ui/navigation-menu' ;
7- import { Sheet , SheetContent , SheetHeader , SheetTitle , SheetTrigger } from '@/components/ui/sheet' ;
8- import { Tooltip , TooltipContent , TooltipProvider , TooltipTrigger } from '@/components/ui/tooltip' ;
5+ import {
6+ DropdownMenu ,
7+ DropdownMenuContent ,
8+ DropdownMenuTrigger ,
9+ } from '@/components/ui/dropdown-menu' ;
10+ import {
11+ NavigationMenu ,
12+ NavigationMenuItem ,
13+ NavigationMenuList ,
14+ navigationMenuTriggerStyle ,
15+ } from '@/components/ui/navigation-menu' ;
16+ import {
17+ Sheet ,
18+ SheetContent ,
19+ SheetHeader ,
20+ SheetTitle ,
21+ SheetTrigger ,
22+ } from '@/components/ui/sheet' ;
23+ import {
24+ Tooltip ,
25+ TooltipContent ,
26+ TooltipProvider ,
27+ TooltipTrigger ,
28+ } from '@/components/ui/tooltip' ;
929import { UserMenuContent } from '@/components/user-menu-content' ;
1030import { useInitials } from '@/hooks/use-initials' ;
1131import { cn } from '@/lib/utils' ;
@@ -37,7 +57,8 @@ const rightNavItems: NavItem[] = [
3757 } ,
3858] ;
3959
40- const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' ;
60+ const activeItemStyles =
61+ 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' ;
4162
4263interface AppHeaderProps {
4364 breadcrumbs ?: BreadcrumbItem [ ] ;
@@ -55,21 +76,39 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
5576 < div className = "lg:hidden" >
5677 < Sheet >
5778 < SheetTrigger asChild >
58- < Button variant = "ghost" size = "icon" className = "mr-2 h-[34px] w-[34px]" >
79+ < Button
80+ variant = "ghost"
81+ size = "icon"
82+ className = "mr-2 h-[34px] w-[34px]"
83+ >
5984 < Menu className = "h-5 w-5" />
6085 </ Button >
6186 </ SheetTrigger >
62- < SheetContent side = "left" className = "flex h-full w-64 flex-col items-stretch justify-between bg-sidebar" >
63- < SheetTitle className = "sr-only" > Navigation Menu</ SheetTitle >
87+ < SheetContent
88+ side = "left"
89+ className = "flex h-full w-64 flex-col items-stretch justify-between bg-sidebar"
90+ >
91+ < SheetTitle className = "sr-only" >
92+ Navigation Menu
93+ </ SheetTitle >
6494 < SheetHeader className = "flex justify-start text-left" >
6595 < AppLogoIcon className = "h-6 w-6 fill-current text-black dark:text-white" />
6696 </ SheetHeader >
6797 < div className = "flex h-full flex-1 flex-col space-y-4 p-4" >
6898 < div className = "flex h-full flex-col justify-between text-sm" >
6999 < div className = "flex flex-col space-y-4" >
70100 { mainNavItems . map ( ( item ) => (
71- < Link key = { item . title } href = { item . href } className = "flex items-center space-x-2 font-medium" >
72- { item . icon && < Icon iconNode = { item . icon } className = "h-5 w-5" /> }
101+ < Link
102+ key = { item . title }
103+ href = { item . href }
104+ className = "flex items-center space-x-2 font-medium"
105+ >
106+ { item . icon && (
107+ < Icon
108+ iconNode = { item . icon }
109+ className = "h-5 w-5"
110+ />
111+ ) }
73112 < span > { item . title } </ span >
74113 </ Link >
75114 ) ) }
@@ -79,12 +118,22 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
79118 { rightNavItems . map ( ( item ) => (
80119 < a
81120 key = { item . title }
82- href = { typeof item . href === 'string' ? item . href : item . href . url }
121+ href = {
122+ typeof item . href ===
123+ 'string'
124+ ? item . href
125+ : item . href . url
126+ }
83127 target = "_blank"
84128 rel = "noopener noreferrer"
85129 className = "flex items-center space-x-2 font-medium"
86130 >
87- { item . icon && < Icon iconNode = { item . icon } className = "h-5 w-5" /> }
131+ { item . icon && (
132+ < Icon
133+ iconNode = { item . icon }
134+ className = "h-5 w-5"
135+ />
136+ ) }
88137 < span > { item . title } </ span >
89138 </ a >
90139 ) ) }
@@ -95,7 +144,11 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
95144 </ Sheet >
96145 </ div >
97146
98- < Link href = { dashboard ( ) } prefetch className = "flex items-center space-x-2" >
147+ < Link
148+ href = { dashboard ( ) }
149+ prefetch
150+ className = "flex items-center space-x-2"
151+ >
99152 < AppLogo />
100153 </ Link >
101154
@@ -104,16 +157,29 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
104157 < NavigationMenu className = "flex h-full items-stretch" >
105158 < NavigationMenuList className = "flex h-full items-stretch space-x-2" >
106159 { mainNavItems . map ( ( item , index ) => (
107- < NavigationMenuItem key = { index } className = "relative flex h-full items-center" >
160+ < NavigationMenuItem
161+ key = { index }
162+ className = "relative flex h-full items-center"
163+ >
108164 < Link
109165 href = { item . href }
110166 className = { cn (
111167 navigationMenuTriggerStyle ( ) ,
112- page . url === ( typeof item . href === 'string' ? item . href : item . href . url ) && activeItemStyles ,
168+ page . url ===
169+ ( typeof item . href ===
170+ 'string'
171+ ? item . href
172+ : item . href . url ) &&
173+ activeItemStyles ,
113174 'h-9 cursor-pointer px-3' ,
114175 ) }
115176 >
116- { item . icon && < Icon iconNode = { item . icon } className = "mr-2 h-4 w-4" /> }
177+ { item . icon && (
178+ < Icon
179+ iconNode = { item . icon }
180+ className = "mr-2 h-4 w-4"
181+ />
182+ ) }
117183 { item . title }
118184 </ Link >
119185 { page . url === item . href && (
@@ -127,22 +193,41 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
127193
128194 < div className = "ml-auto flex items-center space-x-2" >
129195 < div className = "relative flex items-center space-x-1" >
130- < Button variant = "ghost" size = "icon" className = "group h-9 w-9 cursor-pointer" >
196+ < Button
197+ variant = "ghost"
198+ size = "icon"
199+ className = "group h-9 w-9 cursor-pointer"
200+ >
131201 < Search className = "!size-5 opacity-80 group-hover:opacity-100" />
132202 </ Button >
133203 < div className = "hidden lg:flex" >
134204 { rightNavItems . map ( ( item ) => (
135- < TooltipProvider key = { item . title } delayDuration = { 0 } >
205+ < TooltipProvider
206+ key = { item . title }
207+ delayDuration = { 0 }
208+ >
136209 < Tooltip >
137210 < TooltipTrigger >
138211 < a
139- href = { typeof item . href === 'string' ? item . href : item . href . url }
212+ href = {
213+ typeof item . href ===
214+ 'string'
215+ ? item . href
216+ : item . href . url
217+ }
140218 target = "_blank"
141219 rel = "noopener noreferrer"
142220 className = "group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
143221 >
144- < span className = "sr-only" > { item . title } </ span >
145- { item . icon && < Icon iconNode = { item . icon } className = "size-5 opacity-80 group-hover:opacity-100" /> }
222+ < span className = "sr-only" >
223+ { item . title }
224+ </ span >
225+ { item . icon && (
226+ < Icon
227+ iconNode = { item . icon }
228+ className = "size-5 opacity-80 group-hover:opacity-100"
229+ />
230+ ) }
146231 </ a >
147232 </ TooltipTrigger >
148233 < TooltipContent >
@@ -155,9 +240,15 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
155240 </ div >
156241 < DropdownMenu >
157242 < DropdownMenuTrigger asChild >
158- < Button variant = "ghost" className = "size-10 rounded-full p-1" >
243+ < Button
244+ variant = "ghost"
245+ className = "size-10 rounded-full p-1"
246+ >
159247 < Avatar className = "size-8 overflow-hidden rounded-full" >
160- < AvatarImage src = { auth . user . avatar } alt = { auth . user . name } />
248+ < AvatarImage
249+ src = { auth . user . avatar }
250+ alt = { auth . user . name }
251+ />
161252 < AvatarFallback className = "rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white" >
162253 { getInitials ( auth . user . name ) }
163254 </ AvatarFallback >
0 commit comments