@@ -2,10 +2,30 @@ import { Breadcrumbs } from '@/components/breadcrumbs';
2
2
import { Icon } from '@/components/icon' ;
3
3
import { Avatar , AvatarFallback , AvatarImage } from '@/components/ui/avatar' ;
4
4
import { 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' ;
9
29
import { UserMenuContent } from '@/components/user-menu-content' ;
10
30
import { useInitials } from '@/hooks/use-initials' ;
11
31
import { cn } from '@/lib/utils' ;
@@ -37,7 +57,8 @@ const rightNavItems: NavItem[] = [
37
57
} ,
38
58
] ;
39
59
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' ;
41
62
42
63
interface AppHeaderProps {
43
64
breadcrumbs ?: BreadcrumbItem [ ] ;
@@ -55,21 +76,39 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
55
76
< div className = "lg:hidden" >
56
77
< Sheet >
57
78
< 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
+ >
59
84
< Menu className = "h-5 w-5" />
60
85
</ Button >
61
86
</ 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 >
64
94
< SheetHeader className = "flex justify-start text-left" >
65
95
< AppLogoIcon className = "h-6 w-6 fill-current text-black dark:text-white" />
66
96
</ SheetHeader >
67
97
< div className = "flex h-full flex-1 flex-col space-y-4 p-4" >
68
98
< div className = "flex h-full flex-col justify-between text-sm" >
69
99
< div className = "flex flex-col space-y-4" >
70
100
{ 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
+ ) }
73
112
< span > { item . title } </ span >
74
113
</ Link >
75
114
) ) }
@@ -79,12 +118,22 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
79
118
{ rightNavItems . map ( ( item ) => (
80
119
< a
81
120
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
+ }
83
127
target = "_blank"
84
128
rel = "noopener noreferrer"
85
129
className = "flex items-center space-x-2 font-medium"
86
130
>
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
+ ) }
88
137
< span > { item . title } </ span >
89
138
</ a >
90
139
) ) }
@@ -95,7 +144,11 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
95
144
</ Sheet >
96
145
</ div >
97
146
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
+ >
99
152
< AppLogo />
100
153
</ Link >
101
154
@@ -104,16 +157,29 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
104
157
< NavigationMenu className = "flex h-full items-stretch" >
105
158
< NavigationMenuList className = "flex h-full items-stretch space-x-2" >
106
159
{ 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
+ >
108
164
< Link
109
165
href = { item . href }
110
166
className = { cn (
111
167
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 ,
113
174
'h-9 cursor-pointer px-3' ,
114
175
) }
115
176
>
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
+ ) }
117
183
{ item . title }
118
184
</ Link >
119
185
{ page . url === item . href && (
@@ -127,22 +193,41 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
127
193
128
194
< div className = "ml-auto flex items-center space-x-2" >
129
195
< 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
+ >
131
201
< Search className = "!size-5 opacity-80 group-hover:opacity-100" />
132
202
</ Button >
133
203
< div className = "hidden lg:flex" >
134
204
{ rightNavItems . map ( ( item ) => (
135
- < TooltipProvider key = { item . title } delayDuration = { 0 } >
205
+ < TooltipProvider
206
+ key = { item . title }
207
+ delayDuration = { 0 }
208
+ >
136
209
< Tooltip >
137
210
< TooltipTrigger >
138
211
< 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
+ }
140
218
target = "_blank"
141
219
rel = "noopener noreferrer"
142
220
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"
143
221
>
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
+ ) }
146
231
</ a >
147
232
</ TooltipTrigger >
148
233
< TooltipContent >
@@ -155,9 +240,15 @@ export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
155
240
</ div >
156
241
< DropdownMenu >
157
242
< 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
+ >
159
247
< 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
+ />
161
252
< AvatarFallback className = "rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white" >
162
253
{ getInitials ( auth . user . name ) }
163
254
</ AvatarFallback >
0 commit comments