@@ -4,10 +4,30 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
44import Breadcrumbs from ' @/components/Breadcrumbs.vue' ;
55import { Avatar , AvatarFallback , AvatarImage } from ' @/components/ui/avatar' ;
66import { 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' ;
1131import UserMenuContent from ' @/components/UserMenuContent.vue' ;
1232import { getInitials } from ' @/composables/useInitials' ;
1333import { toUrl , urlIsActive } from ' @/lib/utils' ;
@@ -28,11 +48,16 @@ const props = withDefaults(defineProps<Props>(), {
2848const page = usePage ();
2949const auth = computed (() => page .props .auth );
3050
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+ );
3255
3356const activeItemStyles = computed (
3457 () => (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+ : ' ' ,
3661);
3762
3863const mainNavItems: NavItem [] = [
@@ -65,16 +90,26 @@ const rightNavItems: NavItem[] = [
6590 <div class =" lg:hidden" >
6691 <Sheet >
6792 <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+ >
6998 <Menu class =" h-5 w-5" />
7099 </Button >
71100 </SheetTrigger >
72101 <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+ >
74105 <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+ />
76109 </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+ >
78113 <nav class =" -mx-3 space-y-1" >
79114 <Link
80115 v-for =" item in mainNavItems"
@@ -83,7 +118,11 @@ const rightNavItems: NavItem[] = [
83118 class =" flex items-center gap-x-3 rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent"
84119 :class =" activeItemStyles(item.href)"
85120 >
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+ />
87126 {{ item.title }}
88127 </Link >
89128 </nav >
@@ -96,7 +135,11 @@ const rightNavItems: NavItem[] = [
96135 rel =" noopener noreferrer"
97136 class =" flex items-center space-x-2 text-sm font-medium"
98137 >
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+ />
100143 <span >{{ item.title }}</span >
101144 </a >
102145 </div >
@@ -112,13 +155,27 @@ const rightNavItems: NavItem[] = [
112155 <!-- Desktop Menu -->
113156 <div class =" hidden h-full lg:flex lg:flex-1" >
114157 <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+ >
117166 <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+ ]"
119172 :href =" item.href"
120173 >
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+ />
122179 {{ item.title }}
123180 </Link >
124181 <div
@@ -132,19 +189,42 @@ const rightNavItems: NavItem[] = [
132189
133190 <div class =" ml-auto flex items-center space-x-2" >
134191 <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+ />
137200 </Button >
138201
139202 <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+ >
141207 <TooltipProvider :delay-duration =" 0" >
142208 <Tooltip >
143209 <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+ />
148228 </a >
149229 </Button >
150230 </TooltipTrigger >
@@ -164,9 +244,17 @@ const rightNavItems: NavItem[] = [
164244 size =" icon"
165245 class =" relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
166246 >
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+ >
170258 {{ getInitials(auth.user?.name) }}
171259 </AvatarFallback >
172260 </Avatar >
@@ -180,8 +268,13 @@ const rightNavItems: NavItem[] = [
180268 </div >
181269 </div >
182270
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+ >
185278 <Breadcrumbs :breadcrumbs =" breadcrumbs" />
186279 </div >
187280 </div >
0 commit comments