✨ Improve docs layout and re-arrange the sponsor list

package.json

@@ -8,6 +8,7 @@
     "devDependencies": {
         "@alpinejs/collapse": "^3.14.9",
         "@alpinejs/persist": "^3.14.9",
+        "@alpinejs/resize": "^3.14.9",
         "@docsearch/js": "^3.9.0",
         "@fontsource/poppins": "^5.2.5",
         "@tailwindcss/typography": "^0.5.16",

resources/css/app.css

@@ -50,12 +50,12 @@
 }
 
 /* Whole menu */
-nav ul {
+nav.docs-navigation ul {
     @apply list-none text-sm;
 }
 
 /* Categories */
-nav > ul > li {
+nav.docs-navigation > ul > li {
     @apply mb-3;
 
     & > a {
@@ -65,24 +65,24 @@ nav > ul > li {
     }
 }
 
-nav > ul > li.active > a {
+nav.docs-navigation > ul > li.active > a {
     @apply text-black dark:text-white;
 
     & > svg {
         @apply text-violet-400;
     }
 }
 
-nav > ul > li > a {
+nav.docs-navigation > ul > li > a {
     @apply transition duration-200 will-change-transform;
 }
 
-nav > ul > li:hover > a {
+nav.docs-navigation > ul > li:hover > a {
     @apply translate-x-0.5 bg-gray-50 dark:bg-gray-900/50;
 }
 
 /* Sub menus */
-nav > ul > li > ul {
+nav.docs-navigation > ul > li > ul {
     & > li {
         @apply font-normal;
 

resources/js/app.js

@@ -2,6 +2,7 @@ import './fonts'
 import './bootstrap'
 import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
+import resize from '@alpinejs/resize'
 import persist from '@alpinejs/persist'
 import codeBlock from './alpine/codeBlock.js'
 import docsearch from '@docsearch/js'
@@ -58,6 +59,7 @@ Alpine.magic('refAll', (el) => {
 
 Alpine.plugin(collapse)
 Alpine.plugin(persist)
+Alpine.plugin(resize)
 Alpine.start()
 
 // Docsearch

resources/views/components/alert-beta.blade.php

@@ -1,17 +1,17 @@
 <div
-    class="relative z-0 mt-5 flex items-center gap-6 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 dark:bg-mirage"
+    class="relative z-0 mt-5 flex flex-col items-start gap-x-6 gap-y-4 overflow-hidden rounded-2xl bg-yellow-50/50 px-6 py-5 ring-1 ring-black/5 min-[450px]:flex-row min-[450px]:items-center dark:bg-mirage"
     role="alert"
     aria-labelledby="beta-alert-title"
     aria-describedby="beta-alert-description"
 >
     <div
-        class="absolute left-0 top-1/2 -z-10 size-16 -translate-y-1/2 rounded-full bg-yellow-400/60 blur-2xl dark:block"
+        class="absolute left-0 top-0 -z-10 size-16 rounded-full bg-yellow-400/60 blur-2xl min-[450px]:top-1/2 min-[450px]:-translate-y-1/2 dark:block"
         aria-hidden="true"
     ></div>
 
     {{-- Icon --}}
     <x-icons.alert-diamond
-        class="size-10 shrink-0"
+        class="size-10 shrink-0 mix-blend-hard-light"
         aria-hidden="true"
     />
 

resources/views/components/footer.blade.php

@@ -190,13 +190,15 @@ class="flex flex-col flex-wrap items-center gap-2 opacity-0 md:flex-row"
             <div class="flex gap-1">
                 <div>Website designed by</div>
                 <a
-                    href="https://x.com/HassanZahirnia"
+                    href="https://zahirnia.com"
                     target="_blank"
-                    class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
-                    aria-label="Hassan's Twitter profile"
-                    rel="noopener noreferrer"
+                    class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
+                    aria-label="Hassan's website"
                 >
                     Hassan Zahirnia
+                    <div
+                        class="absolute -bottom-0.5 left-0 h-px w-full origin-right scale-x-0 bg-current transition duration-300 ease-out will-change-transform group-hover:origin-left group-hover:scale-x-100"
+                    ></div>
                 </a>
             </div>
             <div
@@ -207,11 +209,14 @@ class="hidden h-3 w-0.5 bg-gray-300 md:block dark:bg-[#242734]"
                 <a
                     href="https://x.com/caneco"
                     target="_blank"
-                    class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
+                    class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                     aria-label="Caneco's Twitter profile"
                     rel="noopener noreferrer"
                 >
                     Caneco
+                    <div
+                        class="absolute -bottom-0.5 left-0 h-px w-full origin-right scale-x-0 bg-current transition duration-300 ease-out will-change-transform group-hover:origin-left group-hover:scale-x-100"
+                    ></div>
                 </a>
             </div>
         </div>
@@ -239,21 +244,27 @@ class="opacity-0"
             <a
                 href="https://x.com/marcelpociot"
                 target="_blank"
-                class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
+                class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                 aria-label="Marcel Pociot's Twitter profile"
                 rel="noopener noreferrer"
             >
                 Marcel Pociot
+                <div
+                    class="absolute -bottom-0.5 left-0 h-px w-full origin-right scale-x-0 bg-current transition duration-300 ease-out will-change-transform group-hover:origin-left group-hover:scale-x-100"
+                ></div>
             </a>
             <span>and</span>
             <a
                 href="https://x.com/simonhamp"
                 target="_blank"
-                class="font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
+                class="group relative font-medium text-black/80 transition duration-200 hover:text-black dark:text-white/80 dark:hover:text-white"
                 aria-label="Simon Hamp's Twitter profile"
                 rel="noopener noreferrer"
             >
                 Simon Hamp
+                <div
+                    class="absolute -bottom-0.5 left-0 h-px w-full origin-right scale-x-0 bg-current transition duration-300 ease-out will-change-transform group-hover:origin-left group-hover:scale-x-100"
+                ></div>
             </a>
         </div>
     </section>

resources/views/components/icons/heart.blade.php

@@ -0,0 +1,14 @@
+<svg
+    {{ $attributes }}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 14"
+>
+    <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M13.9999 4.90123c-0.0243 -1.61475 -0.957 -3.19764 -2.3809 -3.84786 -0.7225 -0.329946 -1.5595 -0.412005 -2.43315 -0.140193C8.45112 1.14176 7.71291 1.61309 7 2.35813 6.28709 1.61309 5.54887 1.14177 4.81414 0.913202 3.94046 0.641407 3.10347 0.723494 2.38096 1.05346 0.957106 1.70373 0.0244119 3.28666 0.0000568628 4.90141L0 4.90141v0.00754c0 2.35206 1.42699 4.43436 2.9363 5.89465 0.76215 0.7374 1.5664 1.3374 2.26745 1.756 0.35035 0.2092 0.68156 0.3771 0.97447 0.4942 0.28057 0.1123 0.56991 0.1961 0.82177 0.1961s0.5412 -0.0839 0.82177 -0.1961c0.29292 -0.1171 0.62413 -0.285 0.97448 -0.4942 0.70105 -0.4187 1.50526 -1.0186 2.26746 -1.7561C12.573 9.34318 14 7.26083 14 4.90877h0.0001l-0.0002 -0.00754Z"
+        clip-rule="evenodd"
+        stroke-width="1"
+    ></path>
+</svg>

resources/views/components/layout-three-columns.blade.php

@@ -1,7 +1,7 @@
 <x-layout :hasMenu="! empty($sidebarLeft)">
     {{-- Main container --}}
     <main
-        class="mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl 2xl:max-w-[90rem]"
+        class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-[90rem]"
     >
         {{-- Left sidebar --}}
         @if (! empty($sidebarLeft))
@@ -10,7 +10,7 @@ class="mx-auto flex w-full max-w-5xl grow px-4 pt-1 xl:max-w-7xl 2xl:max-w-[90re
             </x-sidebar-left-navigation>
         @endif
 
-        <div class="flex w-full min-w-0 grow px-2 pt-2">
+        <div class="flex w-full min-w-0 grow items-start px-2 pt-2">
             {{-- Content --}}
             <article class="flex w-full min-w-0 grow flex-col lg:pl-5 xl:pr-5">
                 {{ $slot }}

resources/views/components/layout.blade.php

@@ -58,12 +58,30 @@
     </head>
     <body
         x-cloak
-        x-data="{ showDocsNavigation: false, scrolled: false }"
+        x-data="{
+            showDocsNavigation: false,
+            scrolled: window.scrollY > 50,
+            width: window.innerWidth,
+            get showPlatformSwitcherHeader() {
+                return ! this.scrolled && this.width >= 1024
+            },
+        }"
+        x-resize="
+            width = $width
+            if (width >= 1024) showDocsNavigation = false
+        "
         x-init="
             window.addEventListener('scroll', () => {
                 scrolled = window.scrollY > 50
             })
         "
+        x-effect="
+            if (showDocsNavigation) {
+                document.body.style.overflow = 'hidden'
+            } else {
+                document.body.style.overflow = ''
+            }
+        "
         class="min-h-screen overflow-x-clip font-poppins antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
     >
         <x-navigation-bar :hasMenu="$hasMenu ?? false" />