✨ Improve docs layout and re-arrange the sponsor list (#102)

* ✨ Add @alpinejs/resize dependency and update layout for responsive behavior

* ✨ Add footer links underline effect

* ✨ Update footer link underline color to use current text color

* ✨ Update layout components to remove unnecessary max-height constraints

* ✨ Refactor navigation components to improve layout and transition effects

* ✨ Add overflow control for body based on documentation navigation visibility

* ✨ Update navigation structure to use specific class for documentation navigation

* ✨ Adjust sidebar navigation styles for improved layout and overflow handling

* ✨ Add max-height constraint to sidebars for improved overflow handling

* ✨ Add max-height and overflow control to table of contents for improved layout

* ✨ Refactor table of contents and sponsors layout; remove unused briefcase icon

* ✨ Add sponsor link and decorative circle to navigation bar

* ✨ Replace love balloons icon with heart icon in navigation bar; enhance sponsor link visuals

* ✨ Enhance sponsor link animation in navigation bar; add heart animations on hover

* ✨ Improve accessibility for sponsor link in navigation bar; add aria-labels and hidden text

* ✨ Update corporate sponsors layout; reduce height of sponsor links and logos for improved design consistency

* ✨ Optimize animation durations and adjust x-coordinate for sponsor heart in navigation bar

* ✨ Update navigation bar styles; adjust background colors and blur effects for improved visual consistency

* ✨ Update sponsor link in navigation bar; change href to point to documentation page

* ✨ Refactor navigation and sidebar components; improve layout and accessibility for sponsors section

* ✨ Update navigation bar sponsor link styles; enhance gradient colors for improved visual appeal

* ✨ Adjust minimum height of table of contents container; improve layout consistency

* ✨ Refactor beta alert component; improve layout responsiveness and visual hierarchy

Author: HassanZahirnia

package-lock.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",

package.json

@@ -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/css/app.css

@@ -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/js/app.js

@@ -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/alert-beta.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/footer.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/icons/briefcase.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/icons/heart.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" />