Merge pull request #2 from hexadog/develop

Develop

Author: gaetan-hexadog

resources/views/components/children.blade.php

@@ -4,9 +4,9 @@
         <x-menus-divider :item="$item" class="py-2 px-16 border-0 bg-gray-500 text-gray-500 h-px" />
         @else
             @if($item->isActive())
-            <x-menus-item :item="$item" class="py-2 px-16 block text-sm text-gray-600 hover:bg-blue-500 hover:text-white bg-gray-200 text-gray-700 border-r-4 border-gray-700" />
+            <x-menus-item :item="$item" class="w-full inline-flex items-center py-3 px-6 text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100 border-l-4 border-purple-700" />
             @else
-            <x-menus-item :item="$item" class="py-2 px-16 block text-sm text-gray-600 hover:bg-blue-500 hover:text-white" />
+            <x-menus-item :item="$item" class="w-full inline-flex items-center py-3 px-6 text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100" />
             @endif
         @endif
     @endforeach

resources/views/components/header.blade.php

@@ -1,9 +1,9 @@
-<div x-data="{ open: false }">
+<div x-data="{ open: {{ $item->isActive() ? 'true' : 'false' }} }">
     @if($item->haschildren())
     <button @click="open = !open" {{ $attributes->merge($item->attributes) }}>
         <span class="flex items-center">
             <x-menus-icon class="h-5 w-5" :item="$item" />
-            <span class="mx-4 font-medium">{{ $item->title }}</span>
+            <span class="mx-4">{{ $item->title }}</span>
         </span>
 
         <span>

resources/views/components/icon.blade.php

@@ -2,6 +2,6 @@
     @isset($slot)
     {{ $slot }}
     @else
-    <i class="{{ $icon }}"></i>
+    {{ $icon }}
     @endif
 </div>

resources/views/components/item.blade.php

@@ -1,9 +1,9 @@
 @if($item->haschildren())
-<div x-data="{ open: false }" {{ $attributes->merge($item->attributes) }}>
-    <button @click="open = !open">
+<div x-data="{ open: {{ $item->isActive() ? 'true' : 'false' }} }" {{ $attributes->merge($item->attributes) }}>
+    <button @click="open = !open" class="flex justify-between items-center">
         <span class="flex items-center">
             <x-menus-icon class="h-5 w-5" :item="$item" />
-            <span class="mx-4 font-medium">{{ $item->title }}</span>
+            <span class="mx-4">{{ $item->title }}</span>
         </span>
 
         <span>
@@ -19,6 +19,6 @@
 @else
 <a {{ $attributes->merge($item->attributes)->merge(['href' => $item->getUrl()]) }}>
     <x-menus-icon class="h-5 w-5" :item="$item" />
-    <span class="mx-4 font-medium">{{ $item->title }}</span>
+    <span class="mx-4">{{ $item->title }}</span>
 </a>
 @endif

resources/views/components/menu.blade.php

@@ -4,9 +4,9 @@
         <x-menus-divider :item="$item" class="border-0 bg-gray-500 text-gray-500 h-px" />
     @else
         @if($item->isActive())
-        <x-menus-item :item="$item" class="w-full flex justify-between items-center py-3 px-6 text-gray-600 cursor-pointer hover:bg-gray-100 hover:text-gray-700 focus:outline-none bg-gray-200 text-gray-700 border-r-4 border-gray-700" />
+        <x-menus-item :item="$item" class="w-full inline-flex items-center py-3 px-6 text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100 border-l-4 border-purple-700" />
         @else
-        <x-menus-item :item="$item" class="w-full flex justify-between items-center py-3 px-6 text-gray-600 cursor-pointer hover:bg-gray-100 hover:text-gray-700 focus:outline-none" />
+        <x-menus-item :item="$item" class="w-full inline-flex items-center py-3 px-6 text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100" />
         @endif
     @endif
 @endforeach