@@ -4,10 +4,30 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
4
4
import Breadcrumbs from ' @/components/Breadcrumbs.vue' ;
5
5
import { Avatar , AvatarFallback , AvatarImage } from ' @/components/ui/avatar' ;
6
6
import { Button } from ' @/components/ui/button' ;
7
- import { DropdownMenu , DropdownMenuContent , DropdownMenuTrigger } from ' @/components/ui/dropdown-menu' ;
8
- import { NavigationMenu , NavigationMenuItem , NavigationMenuList , navigationMenuTriggerStyle } from ' @/components/ui/navigation-menu' ;
9
- import { Sheet , SheetContent , SheetHeader , SheetTitle , SheetTrigger } from ' @/components/ui/sheet' ;
10
- import { Tooltip , TooltipContent , TooltipProvider , TooltipTrigger } from ' @/components/ui/tooltip' ;
7
+ import {
8
+ DropdownMenu ,
9
+ DropdownMenuContent ,
10
+ DropdownMenuTrigger ,
11
+ } from ' @/components/ui/dropdown-menu' ;
12
+ import {
13
+ NavigationMenu ,
14
+ NavigationMenuItem ,
15
+ NavigationMenuList ,
16
+ navigationMenuTriggerStyle ,
17
+ } from ' @/components/ui/navigation-menu' ;
18
+ import {
19
+ Sheet ,
20
+ SheetContent ,
21
+ SheetHeader ,
22
+ SheetTitle ,
23
+ SheetTrigger ,
24
+ } from ' @/components/ui/sheet' ;
25
+ import {
26
+ Tooltip ,
27
+ TooltipContent ,
28
+ TooltipProvider ,
29
+ TooltipTrigger ,
30
+ } from ' @/components/ui/tooltip' ;
11
31
import UserMenuContent from ' @/components/UserMenuContent.vue' ;
12
32
import { getInitials } from ' @/composables/useInitials' ;
13
33
import { toUrl , urlIsActive } from ' @/lib/utils' ;
@@ -28,11 +48,16 @@ const props = withDefaults(defineProps<Props>(), {
28
48
const page = usePage ();
29
49
const auth = computed (() => page .props .auth );
30
50
31
- const isCurrentRoute = computed (() => (url : NonNullable <InertiaLinkProps [' href' ]>) => urlIsActive (url , page .url ));
51
+ const isCurrentRoute = computed (
52
+ () => (url : NonNullable <InertiaLinkProps [' href' ]>) =>
53
+ urlIsActive (url , page .url ),
54
+ );
32
55
33
56
const activeItemStyles = computed (
34
57
() => (url : NonNullable <InertiaLinkProps [' href' ]>) =>
35
- isCurrentRoute .value (toUrl (url )) ? ' text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100' : ' ' ,
58
+ isCurrentRoute .value (toUrl (url ))
59
+ ? ' text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
60
+ : ' ' ,
36
61
);
37
62
38
63
const mainNavItems: NavItem [] = [
@@ -65,16 +90,26 @@ const rightNavItems: NavItem[] = [
65
90
<div class =" lg:hidden" >
66
91
<Sheet >
67
92
<SheetTrigger :as-child =" true" >
68
- <Button variant =" ghost" size =" icon" class =" mr-2 h-9 w-9" >
93
+ <Button
94
+ variant =" ghost"
95
+ size =" icon"
96
+ class =" mr-2 h-9 w-9"
97
+ >
69
98
<Menu class =" h-5 w-5" />
70
99
</Button >
71
100
</SheetTrigger >
72
101
<SheetContent side =" left" class =" w-[300px] p-6" >
73
- <SheetTitle class =" sr-only" >Navigation Menu</SheetTitle >
102
+ <SheetTitle class =" sr-only"
103
+ >Navigation Menu</SheetTitle
104
+ >
74
105
<SheetHeader class =" flex justify-start text-left" >
75
- <AppLogoIcon class =" size-6 fill-current text-black dark:text-white" />
106
+ <AppLogoIcon
107
+ class =" size-6 fill-current text-black dark:text-white"
108
+ />
76
109
</SheetHeader >
77
- <div class =" flex h-full flex-1 flex-col justify-between space-y-4 py-6" >
110
+ <div
111
+ class =" flex h-full flex-1 flex-col justify-between space-y-4 py-6"
112
+ >
78
113
<nav class =" -mx-3 space-y-1" >
79
114
<Link
80
115
v-for =" item in mainNavItems"
@@ -83,7 +118,11 @@ const rightNavItems: NavItem[] = [
83
118
class =" flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
84
119
:class =" activeItemStyles(item.href)"
85
120
>
86
- <component v-if =" item.icon" :is =" item.icon" class =" h-5 w-5" />
121
+ <component
122
+ v-if =" item.icon"
123
+ :is =" item.icon"
124
+ class =" h-5 w-5"
125
+ />
87
126
{{ item.title }}
88
127
</Link >
89
128
</nav >
@@ -96,7 +135,11 @@ const rightNavItems: NavItem[] = [
96
135
rel =" noopener noreferrer"
97
136
class =" flex items-center space-x-2 text-sm font-medium"
98
137
>
99
- <component v-if =" item.icon" :is =" item.icon" class =" h-5 w-5" />
138
+ <component
139
+ v-if =" item.icon"
140
+ :is =" item.icon"
141
+ class =" h-5 w-5"
142
+ />
100
143
<span >{{ item.title }}</span >
101
144
</a >
102
145
</div >
@@ -112,13 +155,27 @@ const rightNavItems: NavItem[] = [
112
155
<!-- Desktop Menu -->
113
156
<div class =" hidden h-full lg:flex lg:flex-1" >
114
157
<NavigationMenu class =" ml-10 flex h-full items-stretch" >
115
- <NavigationMenuList class =" flex h-full items-stretch space-x-2" >
116
- <NavigationMenuItem v-for =" (item, index) in mainNavItems" :key =" index" class =" relative flex h-full items-center" >
158
+ <NavigationMenuList
159
+ class =" flex h-full items-stretch space-x-2"
160
+ >
161
+ <NavigationMenuItem
162
+ v-for =" (item, index) in mainNavItems"
163
+ :key =" index"
164
+ class =" relative flex h-full items-center"
165
+ >
117
166
<Link
118
- :class =" [navigationMenuTriggerStyle(), activeItemStyles(item.href), 'h-9 cursor-pointer px-3']"
167
+ :class =" [
168
+ navigationMenuTriggerStyle(),
169
+ activeItemStyles(item.href),
170
+ 'h-9 cursor-pointer px-3',
171
+ ]"
119
172
:href =" item.href"
120
173
>
121
- <component v-if =" item.icon" :is =" item.icon" class =" mr-2 h-4 w-4" />
174
+ <component
175
+ v-if =" item.icon"
176
+ :is =" item.icon"
177
+ class =" mr-2 h-4 w-4"
178
+ />
122
179
{{ item.title }}
123
180
</Link >
124
181
<div
@@ -132,19 +189,42 @@ const rightNavItems: NavItem[] = [
132
189
133
190
<div class =" ml-auto flex items-center space-x-2" >
134
191
<div class =" relative flex items-center space-x-1" >
135
- <Button variant =" ghost" size =" icon" class =" group h-9 w-9 cursor-pointer" >
136
- <Search class =" size-5 opacity-80 group-hover:opacity-100" />
192
+ <Button
193
+ variant =" ghost"
194
+ size =" icon"
195
+ class =" group h-9 w-9 cursor-pointer"
196
+ >
197
+ <Search
198
+ class =" size-5 opacity-80 group-hover:opacity-100"
199
+ />
137
200
</Button >
138
201
139
202
<div class =" hidden space-x-1 lg:flex" >
140
- <template v-for =" item in rightNavItems " :key =" item .title " >
203
+ <template
204
+ v-for =" item in rightNavItems "
205
+ :key =" item .title "
206
+ >
141
207
<TooltipProvider :delay-duration =" 0" >
142
208
<Tooltip >
143
209
<TooltipTrigger >
144
- <Button variant =" ghost" size =" icon" as-child class =" group h-9 w-9 cursor-pointer" >
145
- <a :href =" toUrl(item.href)" target =" _blank" rel =" noopener noreferrer" >
146
- <span class =" sr-only" >{{ item.title }}</span >
147
- <component :is =" item.icon" class =" size-5 opacity-80 group-hover:opacity-100" />
210
+ <Button
211
+ variant =" ghost"
212
+ size =" icon"
213
+ as-child
214
+ class =" group h-9 w-9 cursor-pointer"
215
+ >
216
+ <a
217
+ :href =" toUrl(item.href)"
218
+ target =" _blank"
219
+ rel =" noopener noreferrer"
220
+ >
221
+ <span class =" sr-only" >{{
222
+ item.title
223
+ }}</span >
224
+ <component
225
+ :is =" item.icon"
226
+ class =" size-5 opacity-80 group-hover:opacity-100"
227
+ />
148
228
</a >
149
229
</Button >
150
230
</TooltipTrigger >
@@ -164,9 +244,17 @@ const rightNavItems: NavItem[] = [
164
244
size =" icon"
165
245
class =" relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
166
246
>
167
- <Avatar class =" size-8 overflow-hidden rounded-full" >
168
- <AvatarImage v-if =" auth.user.avatar" :src =" auth.user.avatar" :alt =" auth.user.name" />
169
- <AvatarFallback class =" rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white" >
247
+ <Avatar
248
+ class =" size-8 overflow-hidden rounded-full"
249
+ >
250
+ <AvatarImage
251
+ v-if =" auth.user.avatar"
252
+ :src =" auth.user.avatar"
253
+ :alt =" auth.user.name"
254
+ />
255
+ <AvatarFallback
256
+ class =" rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
257
+ >
170
258
{{ getInitials(auth.user?.name) }}
171
259
</AvatarFallback >
172
260
</Avatar >
@@ -180,8 +268,13 @@ const rightNavItems: NavItem[] = [
180
268
</div >
181
269
</div >
182
270
183
- <div v-if =" props.breadcrumbs.length > 1" class =" flex w-full border-b border-sidebar-border/70" >
184
- <div class =" mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl" >
271
+ <div
272
+ v-if =" props.breadcrumbs.length > 1"
273
+ class =" flex w-full border-b border-sidebar-border/70"
274
+ >
275
+ <div
276
+ class =" mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl"
277
+ >
185
278
<Breadcrumbs :breadcrumbs =" breadcrumbs" />
186
279
</div >
187
280
</div >
0 commit comments