✨ Reintroduce theme toggle in navigation bar and enhance styling for improved visibility

Author: HassanZahirnia

resources/views/components/navigation-bar.blade.php

@@ -44,9 +44,6 @@ class="hidden rounded-full bg-gray-200/60 px-2 py-1 text-xs text-gray-600 lg:blo
                 class="flex items-center gap-3.5 text-sm"
                 aria-label="Primary navigation"
             >
-                {{-- Theme toggle --}}
-                <x-theme-toggle />
-
                 {{-- Link --}}
                 <a
                     href="/"
@@ -62,7 +59,7 @@ class="flex items-center gap-3.5 text-sm"
 
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 lg:block"
+                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                 ></div>
 
@@ -80,7 +77,7 @@ class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 lg:block"
                 </a>
                 {{-- Decorative circle --}}
                 <div
-                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 lg:block"
+                    class="hidden size-[3px] rotate-45 rounded-sm bg-gray-400 transition duration-200 lg:block dark:opacity-60"
                     aria-hidden="true"
                 ></div>
                 @if ($hasMenu)
@@ -129,6 +126,9 @@ class="h-6 w-6 text-gray-600"
                         Docs
                     </a>
                 @endif
+
+                {{-- Theme toggle --}}
+                <x-theme-toggle />
             </div>
         </div>
     </div>

resources/views/components/theme-toggle.blade.php

@@ -1,5 +1,5 @@
 <div
-    class="theme-selector relative h-10 w-10 cursor-pointer select-none hover:text-slate-600 dark:text-[#ABB0DD] dark:hover:text-[#bcc1ef]"
+    class="theme-selector relative -ml-1.5 h-10 w-10 cursor-pointer select-none hover:text-slate-600 dark:opacity-70 dark:hover:text-[#bcc1ef]"
     x-on:click="darkMode = !darkMode"
     x-data="{
         nightToDay: [