📱 Enhance mobile experience

resources/css/app.css

@@ -67,6 +67,11 @@
     }
 }
 
+/* Prevents scrollbars from appearing when a popover is open */
+html:has(#mobile-menu-popover:popover-open) {
+    overflow: hidden;
+}
+
 /* Scrollbar width */
 ::-webkit-scrollbar {
     height: 8px;

resources/css/docsearch.css

@@ -11,12 +11,12 @@
 }
 
 .DocSearch-Button {
-    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-gray-700/40 transition duration-300 ease-out dark:bg-black/30;
+    @apply m-0 flex items-center rounded-lg bg-gray-50 font-normal ring-1 ring-slate-600/40 transition duration-300 ease-out dark:bg-black/30;
 }
 
 .DocSearch-Button:hover {
     box-shadow: none;
-    @apply bg-gray-100 ring-gray-300 dark:bg-black/50 dark:ring-gray-700/70;
+    @apply bg-gray-100 ring-1 ring-transparent dark:bg-slate-950 dark:ring-slate-700/70;
 }
 
 .DocSearch-Button:hover .DocSearch-Button-Placeholder {
@@ -36,11 +36,11 @@
 }
 
 .DocSearch-Button-Placeholder {
-    @apply hidden pr-1 pl-1 text-sm text-black/60 min-[400px]:block min-[520px]:pr-20 dark:text-white/60;
+    @apply px-1 text-sm text-black/60 transition duration-300 min-[520px]:pr-20 dark:text-white/60;
 }
 
 .DocSearch-Button-Keys {
-    @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none min-[520px]:flex;
+    @apply mt-1 ml-1 hidden min-w-[auto] text-sm leading-none sm:flex;
 }
 
 .DocSearch-Button-Key {
@@ -55,12 +55,108 @@
     @apply text-black;
 }
 
+.DocSearch-Modal:where(.dark, .dark *) {
+    background-color: var(--color-slate-950);
+    --docsearch-hit-active-color: var(--color-slate-300);
+}
+
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
+    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
+    color: var(--color-slate-300);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *)::placeholder {
+    color: var(--color-slate-400);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *) {
+    --tw-shadow: 0 0 #0000;
+    box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+        var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.DocSearch-SearchBar .DocSearch-Form:where(.dark, .dark *):disabled {
+    border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    color: var(--color-slate-400);
+}
+.DocSearch-SearchBar
+    .DocSearch-Form:where(.dark, .dark *):disabled::placeholder,
+.DocSearch-SearchBar .DocSearch-MagnifierLabel {
+    color: var(--color-slate-500);
+}
+.DocSearch-SearchBar .DocSearch-MagnifierLabel:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+.DocSearch-SearchBar .DocSearch-LoadingIndicator {
+    color: var(--color-slate-500);
+}
+.DocSearch-SearchBar .DocSearch-LoadingIndicator:where(.dark, .dark *),
+.DocSearch-SearchBar .DocSearch-Input:where(.dark, .dark *),
+.DocSearch-SearchBar .DocSearch-Cancel:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown .DocSearch-Hits mark:where(.dark, .dark *) {
+    color: var(--color-slate-400);
+}
+
+.DocSearch-Hit-source {
+    @apply py-2.5 text-base;
+}
+
+.DocSearch-Dropdown .DocSearch-Hit-source:where(.dark, .dark *) {
+    background-color: var(--color-slate-950);
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-Hit[aria-selected='true']
+    a:where(.dark, .dark *) {
+    background-color: var(--color-indigo-800);
+}
+
+.DocSearch-Dropdown .DocSearch-Hit a:where(.dark, .dark *) {
+    background-color: var(--color-indigo-900);
+    box-shadow: none;
+}
+
+.DocSearch-Dropdown .DocSearch-Hit .DocSearch-Hit-title:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-NoResults
+    .DocSearch-Screen-Icon:where(.dark, .dark *) {
+    color: var(--color-slate-500);
+}
+
+.DocSearch-Dropdown
+    .DocSearch-NoResults
+    .DocSearch-Title:where(.dark, .dark *) {
+    color: var(--color-slate-300);
+}
+
+.DocSearch-Footer {
+    @apply py-6;
+}
+
+.DocSearch-Footer:where(.dark, .dark *) {
+    background: var(--color-slate-950);
+    box-shadow: none;
+    @apply border-t border-t-slate-700;
+}
+
+.DocSearch-Footer .DocSearch-Logo svg :where(.dark, .dark *) {
+    fill: var(--color-gray-500);
+    color: var(--color-white);
+    background: transparent;
+}
+
 .DocSearch-Screen-Icon {
     display: none;
 }
 
 .DocSearch-Input {
-    @apply focus-visible:outline-none;
+    @apply ring-0 outline-0 focus-visible:outline-none;
 }
 
 .DocSearch-Form {

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

@@ -1,4 +1,4 @@
-<x-layout :hasMenu="! empty($sidebarLeft)">
+<x-layout>
     {{-- Main container --}}
     <main
         class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl:max-w-360"
@@ -13,7 +13,13 @@ class="mx-auto flex w-full max-w-5xl grow items-start px-4 pt-1 xl:max-w-7xl 2xl
         <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 }}
+                {{-- Docs mobile menu --}}
+                <x-docs-menu>
+                    <nav class="docs-navigation">{{ $sidebarLeft }}</nav>
+                </x-docs-menu>
+
+                {{-- Main content --}}
+                <div class="mt-3">{{ $slot }}</div>
             </article>
 
             {{-- Right sidebar --}}

resources/views/components/docs-menu.blade.php

@@ -0,0 +1,64 @@
+<div class="lg:hidden">
+    <div
+        class="mb-2 flex flex-col-reverse items-start justify-between gap-3.5 min-[400px]:mb-2.5 min-[400px]:flex-row min-[400px]:items-center"
+    >
+        {{-- Docs menu button --}}
+        <button
+            type="button"
+            x-on:click="showDocsMenu = !showDocsMenu"
+            class="-mx-1 flex items-center gap-1.5 px-1 py-1.5 transition duration-300 ease-in-out will-change-transform focus:ring-0 focus:outline-none"
+            :aria-expanded="showDocsMenu"
+            aria-label="Toggle docs menu"
+            aria-haspopup="true"
+            title="Open docs navigation"
+            :class="{
+                'translate-x-1': showDocsMenu,
+            }"
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="size-5.5"
+                viewBox="0 0 24 24"
+            >
+                <g
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-width="1.5"
+                >
+                    <path
+                        d="M4 19V5a2 2 0 0 1 2-2h13.4a.6.6 0 0 1 .6.6v13.114"
+                    />
+                    <path
+                        stroke-linejoin="round"
+                        d="M8 3v8l2.5-1.6L13 11V3"
+                    />
+                    <path d="M6 17h14M6 21h14" />
+                    <path
+                        stroke-linejoin="round"
+                        d="M6 21a2 2 0 1 1 0-4"
+                    />
+                </g>
+            </svg>
+
+            <div>Menu</div>
+        </button>
+
+        {{-- Platform switcher --}}
+        <x-mini-platform-switcher />
+    </div>
+
+    {{-- Docs mobile menu --}}
+    <div
+        x-show="showDocsMenu"
+        x-collapse
+        role="dialog"
+        aria-modal="true"
+        aria-label="Docs menu"
+        class="dark:bg-mirage rounded-xl bg-gray-100"
+    >
+        <div class="p-6">
+            {{ $slot }}
+        </div>
+    </div>
+</div>

resources/views/components/layout.blade.php

@@ -60,7 +60,8 @@
     <body
         x-cloak
         x-data="{
-            showDocsNavigation: false,
+            showMobileMenu: false,
+            showDocsMenu: false,
             scrolled: window.scrollY > 50,
             width: window.innerWidth,
             get showPlatformSwitcherHeader() {
@@ -69,23 +70,19 @@
         }"
         x-resize="
             width = $width
-            if (width >= 1024) showDocsNavigation = false
+            if (width >= 1024) {
+                showMobileMenu = false
+                showDocsMenu = 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"
+        class="font-poppins min-h-screen overflow-x-clip antialiased selection:bg-black selection:text-[#b4a9ff] dark:bg-[#050714] dark:text-white"
     >
-        <x-navigation-bar :hasMenu="$hasMenu ?? false" />
+        <x-navigation-bar />
         {{ $slot }}
         <x-footer />
         @livewireScriptConfig

resources/views/components/mini-platform-switcher.blade.php

@@ -0,0 +1,44 @@
+@php
+    $isMobile = request()->is('docs/mobile/*');
+    $mobileHref = '/docs/mobile/1';
+    $desktopHref = '/docs/desktop/1';
+@endphp
+
+<div
+    class="dark:bg-mirage grid h-11 grid-cols-2 items-center gap-0.5 rounded-lg bg-gray-100 p-1 text-xs"
+>
+    <a
+        href="{{ $desktopHref }}"
+        @class([
+            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
+            'bg-white dark:bg-slate-700/30' => ! $isMobile,
+        ])
+    >
+        <div
+            @class([
+                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
+                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => ! $isMobile,
+            ])
+        >
+            <x-icons.pc class="size-5 shrink-0" />
+        </div>
+        <div>Desktop</div>
+    </a>
+    <a
+        href="{{ $mobileHref }}"
+        @class([
+            'flex h-9 items-center gap-1.5 rounded-[calc(var(--radius-lg)-1px)] pr-2 pl-1 transition duration-300 ease-in-out',
+            'bg-white dark:bg-slate-700/30' => $isMobile,
+        ])
+    >
+        <div
+            @class([
+                'grid h-7 w-7.5 place-items-center rounded-[calc(var(--radius-md)-1px)]',
+                'dark:bg-haiti bg-blue-50 text-blue-500 dark:text-blue-400' => $isMobile,
+            ])
+        >
+            <x-icons.device-mobile-phone class="size-4 shrink-0" />
+        </div>
+        <div>Mobile</div>
+    </a>
+</div>