1
1
<v-sidebar-drawer >
2
- <i class =" icon-menu hidden cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-100 dark:hover:bg-gray-950 max-lg:block" ></i >
2
+ <i class =" icon-menu lg: hidden cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-100 dark:hover:bg-gray-950 max-lg:block" ></i >
3
3
</v-sidebar-drawer >
4
4
5
5
@pushOnce (' scripts' )
6
- <script
7
- type =" text/x-template"
6
+ <script
7
+ type =" text/x-template"
8
8
id =" v-sidebar-drawer-template"
9
9
>
10
- < x- admin:: drawer
11
- position= " left"
10
+ < x- admin:: drawer
11
+ position= " left"
12
12
width= " 280px"
13
- class = " [&>:nth-child(3)]:!m-0 [&>:nth-child(3)]:!rounded-l-none [&>:nth-child(3)]:max-sm:!w-[80%]"
13
+ class = " lg:hidden [&>:nth-child(3)]:!m-0 [&>:nth-child(3)]:!rounded-l-none [&>:nth-child(3)]:max-sm:!w-[80%]"
14
14
>
15
15
< x- slot: toggle>
16
- < i class = " icon-menu hidden cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-100 dark:hover:bg-gray-950 max-lg:block" >< / i>
16
+ < i class = " icon-menu lg: hidden cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-100 dark:hover:bg-gray-950 max-lg:block" >< / i>
17
17
< / x- slot>
18
18
19
19
< x- slot: header>
20
20
@if ($logo = core ()-> getConfigData (' general.design.admin_logo.logo_image' ) )
21
- < img
22
- class = " h-10"
23
- src= " {{ Storage:: url ($logo ) } }"
24
- alt= " {{ config (' app.name' ) } }"
21
+ < img
22
+ class = " h-10"
23
+ src= " {{ Storage:: url ($logo ) } }"
24
+ alt= " {{ config (' app.name' ) } }"
25
25
/ >
26
26
@else
27
- < img
27
+ < img
28
28
class = " h-10"
29
29
src= " {{ request ()-> cookie (' dark_mode' ) ? vite ()-> asset (' images/dark-logo.svg' ) : vite ()-> asset (' images/logo.svg' ) } }"
30
- id= " logo-image"
31
- alt= " {{ config (' app.name' ) } }"
30
+ id= " logo-image"
31
+ alt= " {{ config (' app.name' ) } }"
32
32
/ >
33
33
@endif
34
34
< / x- slot>
@@ -41,19 +41,19 @@ class="h-10"
41
41
$hasActiveChild = $menuItem -> haveChildren () && collect ($menuItem -> getChildren ())-> contains (fn ($child ) => $child -> isActive ());
42
42
43
43
$isMenuActive = $menuItem -> isActive () == ' active' || $hasActiveChild ;
44
-
44
+
45
45
$menuKey = $menuItem -> getKey ();
46
46
@endphp
47
47
48
- < div
49
- class = " menu-item relative"
48
+ < div
49
+ class = " menu-item relative"
50
50
data- menu- key= " {{ $menuKey } }"
51
51
>
52
- < a
52
+ < a
53
53
href= " {{ ! in_array ($menuItem -> getKey (), [' settings' , ' configuration' ]) && $menuItem -> haveChildren () ? ' javascript:void(0)' : $menuItem -> getUrl () } }"
54
54
class = " menu-link flex items-center justify-between rounded-lg p-2 transition-colors duration-200"
55
- @if ($menuItem -> haveChildren () && ! in_array ($menuKey , [' settings' , ' configuration' ]) )
56
- @click .prevent = " toggleMenu('{{ $menuKey } } ')"
55
+ @if ($menuItem -> haveChildren () && ! in_array ($menuKey , [' settings' , ' configuration' ]) )
56
+ @click .prevent = " toggleMenu('{{ $menuKey } } ')"
57
57
@endif
58
58
: class = " { 'bg-brandColor text-white': activeMenu === '{{ $menuKey } } ' || {{ $isMenuActive ? ' true' : ' false' } } , 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-950': !(activeMenu === '{{ $menuKey } } ' || {{ $isMenuActive ? ' true' : ' false' } } ) }"
59
59
>
@@ -64,20 +64,20 @@ class="menu-link flex items-center justify-between rounded-lg p-2 transition-col
64
64
< / div>
65
65
66
66
@if ($menuItem -> haveChildren () )
67
- < span
67
+ < span
68
68
class = " transform text-lg transition-transform duration-300"
69
69
: class = " { 'icon-arrow-up': activeMenu === '{{ $menuKey } } ', 'icon-arrow-down': activeMenu !== '{{ $menuKey } } ' }"
70
70
>< / span>
71
71
@endif
72
72
< / a>
73
73
74
74
@if ($menuItem -> haveChildren () && ! in_array ($menuKey , [' settings' , ' configuration' ]) )
75
- < div
75
+ < div
76
76
class = " submenu ml-1 mt-1 overflow-hidden rounded-b-lg border-l-2 transition-all duration-300 dark:border-gray-700"
77
77
: class = " { 'max-h-[500px] py-2 border-l-brandColor bg-gray-50 dark:bg-gray-900': activeMenu === '{{ $menuKey } } ' || {{ $hasActiveChild ? ' true' : ' false' } } , 'max-h-0 py-0 border-transparent bg-transparent': activeMenu !== '{{ $menuKey } } ' && !{{ $hasActiveChild ? ' true' : ' false' } } }"
78
78
>
79
79
@foreach ($menuItem -> getChildren () as $subMenuItem )
80
- < a
80
+ < a
81
81
href= " {{ $subMenuItem -> getUrl () } }"
82
82
class = " submenu-link block whitespace-nowrap p-2 pl-10 text-sm transition-colors duration-200"
83
83
: class = " { 'text-brandColor font-medium bg-gray-100 dark:bg-gray-800': '{{ $subMenuItem -> isActive () } } ' === '1', 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800': '{{ $subMenuItem -> isActive () } } ' !== '1' }" >
@@ -104,7 +104,7 @@ class="submenu-link block whitespace-nowrap p-2 pl-10 text-sm transition-colors
104
104
105
105
mounted () {
106
106
const activeElement = document .querySelector (' .menu-item .menu-link.bg-brandColor' );
107
-
107
+
108
108
if (activeElement) {
109
109
this .activeMenu = activeElement .closest (' .menu-item' ).getAttribute (' data-menu-key' );
110
110
}
0 commit comments