✨ Update styles for sidebar and navigation components (#204)

Author: HassanZahirnia

resources/views/components/docs/sidebar-left-navigation.blade.php

@@ -1,5 +1,5 @@
 <aside
-    class="sticky top-20 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-x-hidden overflow-y-auto pt-4 pr-3 lg:block"
+    class="sticky top-16.5 hidden max-h-[calc(100dvh-7rem)] w-[18rem] shrink-0 overflow-x-hidden overflow-y-auto pt-4 pr-3 lg:block"
 >
     <div class="relative flex flex-1 flex-col pb-5">
         <x-docs.platform-switcher />

resources/views/components/navbar/mobile-menu.blade.php

@@ -68,7 +68,7 @@ class="-ml-2.5 h-5 w-0.5 -rotate-45 rounded-full bg-current transition duration-
         role="dialog"
         aria-modal="true"
         aria-label="Site menu"
-        class="fixed top-23 right-3 bottom-3.5 left-3 h-auto w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-100/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
+        class="fixed top-21 right-3 bottom-3.5 left-3 h-auto w-auto origin-top -translate-y-2 scale-y-90 overflow-y-scroll overscroll-contain rounded-2xl bg-gray-100/50 opacity-0 ring-1 ring-gray-200/80 backdrop-blur-2xl transition transition-discrete duration-300 open:translate-y-0 open:scale-y-100 open:opacity-100 min-[500px]:right-3.5 min-[500px]:left-3.5 dark:bg-black/50 dark:text-white dark:ring-gray-700/70 starting:open:-translate-y-2 starting:open:scale-y-0 starting:open:opacity-0"
     >
         <div class="flex h-full flex-col overflow-hidden p-6">
             <nav

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

@@ -6,15 +6,15 @@
     <x-bifrost-banner />
 </div>
 <nav
-    class="sticky top-0 z-50 flex flex-col items-center justify-center px-2 pt-px min-[500px]:px-3"
+    class="sticky top-0 z-50 flex flex-col items-center justify-center border-b px-2 transition duration-200 ease-out min-[500px]:px-3"
     aria-label="Main Navigation"
+    :class="{
+        'border-b-gray-200/80 backdrop-blur-2xl dark:border-b-gray-700/70 bg-white/50 dark:bg-black/50': scrolled || showMobileMenu,
+        'border-b-transparent dark:bg-transparent': ! scrolled && ! showMobileMenu,
+    }"
 >
     <div
-        :class="{
-            '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 py-4 pr-4 pl-3.5 ring-1 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 py-4 pr-4 pl-3.5 xl:max-w-7xl 2xl:max-w-360"
     >
         {{-- Left side --}}
         <div class="flex items-center gap-3">