✨ Improve navigation bar styling and enhance theme toggle button interaction

Author: HassanZahirnia

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

@@ -10,10 +10,10 @@ class="sticky top-0 z-50 flex flex-col items-center justify-center px-3 pt-px"
 >
     <div
         :class="{
-            'ring-gray-200/80 dark:ring-gray-700/70 bg-white/50 dark:bg-black/50 translate-y-3': scrolled || showMobileMenu,
+            'ring-gray-200/80 backdrop-blur-2xl dark:ring-gray-700/70 bg-white/50 dark:bg-black/50 translate-y-3': scrolled || showMobileMenu,
             'ring-transparent dark:bg-transparent': ! scrolled && ! showMobileMenu,
         }"
-        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 backdrop-blur-2xl transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-360"
+        class="mx-auto flex w-full max-w-5xl items-center justify-between gap-5 rounded-2xl px-5 py-4 ring-1 transition duration-200 ease-out xl:max-w-7xl 2xl:max-w-360"
     >
         {{-- Left side --}}
         <div class="flex items-center gap-3">

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

@@ -93,7 +93,7 @@
     aria-label="Toggle between light and dark mode"
     x-bind:aria-pressed="darkMode ? 'true' : 'false'"
     tabindex="0"
-    class="theme-selector relative -mx-1.5 size-9 cursor-pointer select-none hover:text-slate-600 dark:opacity-70 dark:hover:text-[#bcc1ef]"
+    class="theme-selector relative -mx-1.5 size-9 cursor-pointer transition duration-300 select-none hover:opacity-75 dark:opacity-70 dark:hover:opacity-100"
 >
     <span class="sr-only">Toggle theme</span>