refactor: use conditional classes for navbar components (#651)

Author: Highjhacker

resources/views/navbar/items/desktop.blade.php

@@ -19,8 +19,10 @@
             @isset($navItem['children'])
                 <a
                     href="#"
-                    class="relative inline-flex justify-center items-center px-1 pt-px font-semibold leading-5 border-b-2 border-transparent text-theme-secondary-700 hover:text-theme-secondary-800 hover:border-theme-secondary-300 focus:outline-none transition duration-150 ease-in-out h-full dark:text-theme-secondary-500 dark:hover:text-theme-secondary-400
-                        @if(!$loop->first) ml-8 @endif"
+                    @class([
+                        'relative inline-flex justify-center items-center px-1 pt-px font-semibold leading-5 border-b-2 border-transparent text-theme-secondary-700 hover:text-theme-secondary-800 hover:border-theme-secondary-300 focus:outline-none transition duration-150 ease-in-out h-full dark:text-theme-secondary-500 dark:hover:text-theme-secondary-400',
+                        'ml-8' => ! $loop->first,
+                    ])
                     @click="openDropdown = openDropdown === '{{ $navItem['label'] }}' ? null : '{{ $navItem['label'] }}'"
                     dusk='navbar-{{ Str::slug($navItem['label']) }}'
                 >
@@ -53,6 +55,9 @@ class="relative inline-flex justify-center items-center px-1 pt-px font-semibold
                     </div>
                 </div>
             @else
+                @php
+                    $isCurrentRoute = array_key_exists('route', $navItem) && optional(Route::current())->getName() === $navItem['route'];
+                @endphp
                 <a
                     @if (array_key_exists('href', $navItem))
                         href="{{ $navItem['href'] }}"
@@ -64,14 +69,12 @@ class="relative inline-flex justify-center items-center px-1 pt-px font-semibold
                             {{ $attribute }}="{{ $attributeValue }}"
                         @endforeach
                     @endif
-                    class="inline-flex items-center px-1 pt-px font-semibold leading-5 border-b-2 space-x-3
-                        focus:outline-none transition duration-150 ease-in-out h-full
-                        @if(array_key_exists('route', $navItem) && optional(Route::current())->getName() === $navItem['route'])
-                            border-theme-primary-600 text-theme-secondary-900 dark:text-theme-secondary-400 focus-visible:border-b-0 focus-visible:pt-0 focus-visible:-mt-px
-                        @else
-                            border-transparent text-theme-secondary-700 hover:text-theme-secondary-800 hover:border-theme-secondary-300 dark:text-theme-secondary-500 dark:hover:text-theme-secondary-400 focus-visible:rounded
-                        @endif
-                        @if(!$loop->first) ml-8 @endif"
+                    @class([
+                        'inline-flex items-center px-1 pt-px font-semibold leading-5 border-b-2 space-x-3 focus:outline-none transition duration-150 ease-in-out h-full',
+                        'border-theme-primary-600 text-theme-secondary-900 dark:text-theme-secondary-400 focus-visible:border-b-0 focus-visible:pt-0 focus-visible:-mt-px' => $isCurrentRoute,
+                        'border-transparent text-theme-secondary-700 hover:text-theme-secondary-800 hover:border-theme-secondary-300 dark:text-theme-secondary-500 dark:hover:text-theme-secondary-400 focus-visible:rounded' => ! $isCurrentRoute,
+                        'ml-8' => ! $loop->first
+                    ])
                     @click="openDropdown = null;"
                     dusk='navbar-{{ Str::slug($navItem['label']) }}'
                 >

resources/views/navbar/link-mobile.blade.php

@@ -3,7 +3,10 @@
 <div class="flex">
     <a
         href="{{ $route }}"
-        class="navbar-mobile-link @if($isCurrent) navbar-mobile-link-current @endif"
+        @class([
+            'navbar-mobile-link',
+            'navbar-mobile-link-current' => $isCurrent,
+        ])
     >
         @if($icon ?? false)
             @svg($icon, 'w-6 mr-4')