Mobile menu

NativePHP · simonhamp · Sep 15, 2024 · Sep 14, 2024 · Sep 14, 2024 · Sep 14, 2024
commit 604ce1aab6b020874a69b2e5e95f3fb08d96c56b
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -141,7 +141,6 @@ nav ul li ul {
     }
     nav ul li ul li a {
         @apply w-full;
-        @apply py-2;
         @apply flex flex-1;
     }
 }

diff --git a/resources/views/components/banner.blade.php b/resources/views/components/banner.blade.php
@@ -1,7 +1,9 @@
-<div class="lg:sticky top-0 blur-background text-white bg-gray-50/85 border-b border-gray-100 z-50 dark:bg-gray-800/85 dark:border-0">
+<div class="sticky top-0 blur-background text-white bg-gray-50/85 border-b border-gray-100 z-50 dark:bg-gray-800/85 dark:border-0">
 
-    <x-alert />
-    <div class="flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-screen-xl sm:py-4">
+<div class="hidden lg:block">
+    <x-alert/>
+</div>
+    <div class="lg:relative flex top-0 left-0 z-50 md:flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-screen-xl sm:py-4">
         <a
             href="/"
             class="inline-flex items-center gap-3 transition rounded hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-red-600"
@@ -12,7 +14,7 @@ class="inline-flex items-center gap-3 transition rounded hover:text-white/80 foc
         </a>
         <div id="docsearch"></div>
 
-        <div class="hidden md:flex items-center space-x-5">
+        <div class="hidden lg:flex items-center space-x-5">
 
             <a href="https://www.linkedin.com/company/nativephp/" title="NativePHP on LinkedIn">
                 <x-icons.linkedin class="size-5 text-black dark:text-white hover:text-[#00aaa6]" />
@@ -34,5 +36,18 @@ class="inline-flex items-center gap-3 transition rounded hover:text-white/80 foc
                 <x-icons.github class="size-5  dark:fill-white hover:fill-[#00aaa6]" />
             </a>
         </div>
+        <div class="lg:hidden flex justify-end pl-4">
+            <button type="button" class="" @click="showDocsNavigation = !showDocsNavigation">
+                <div x-show="!showDocsNavigation">
+                    <x-icons.menu class="w-6 h-6 text-teal-600 dark:text-red-300"/>
+                </div>
+                <div x-show="showDocsNavigation">
+                    <x-icons.close class="w-6 h-6 text-teal-600"/>
+                </div>
+            </button>
+        </div>
     </div>
 </div>
+<div class="block lg:hidden">
+    <x-alert/>
+</div>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -23,7 +23,9 @@
     <script src="https://cdn.usefathom.com/script.js" data-site="HALHTNZU" defer></script>
     <!-- / Fathom -->
 </head>
-<body class="min-h-screen font-sans antialiased bg-white dark:bg-gray-900 dark:text-white">
+<body class="min-h-screen font-sans antialiased bg-white dark:bg-gray-900 dark:text-white"
+      x-data="{ showDocsNavigation: false }"
+>
 
 <x-banner />
 {{ $slot }}

diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
@@ -4,6 +4,7 @@
         <div class="max-w-screen-xl w-full mx-auto px-3 sm:px-6 flex flex-wrap justify-between gap-8">
             @include('docs.navigation')
 
+
             <div class="overflow-hidden lg:ml-[240px] max-w-prose w-full py-8 sm:px-8">
 
                 <div class="text-5xl font-bold tracking-tight mb-4 text-[#00aaa6]">

diff --git a/resources/views/docs/navigation.blade.php b/resources/views/docs/navigation.blade.php
@@ -1,5 +1,5 @@
 <div class="
-fixed -mx-3 overflow-y-auto max-h-[calc(100%-134px)] hidden lg:block py-8 lg:max-w-[240px] lg:w-full
+hidden lg:fixed lg:block -mx-3 overflow-y-auto max-h-[calc(100%-134px)] py-8 lg:max-w-[240px] lg:w-full
  border-r border-[#00aaa6] border-opacity-10 dark:border-0
  dark:text-gray-200
   pl-4
@@ -9,23 +9,14 @@
     </nav>
 </div>
 
-{{--<div class="my-8 lg:hidden" x-data="{ showDocsNavigation: false }">--}}
-{{--    <div class="flex justify-end">--}}
-{{--        <button type="button" class="p-4" @click="showDocsNavigation = !showDocsNavigation">--}}
-{{--            <div x-show="!showDocsNavigation">--}}
-{{--                <x-icons.menu class="w-6 h-6 text-teal-600 dark:text-red-300"/>--}}
-{{--            </div>--}}
-{{--            <div x-show="showDocsNavigation">--}}
-{{--                <x-icons.close class="w-6 h-6 text-teal-600"/>--}}
-{{--            </div>--}}
-{{--        </button>--}}
-{{--    </div>--}}
 
-{{--    <nav x-show="showDocsNavigation" x-transition:enter="transition ease-out duration-200"--}}
-{{--         x-transition:enter-start="translate-y-1 opacity-0" x-transition:enter-end="translate-y-0 opacity-100"--}}
-{{--         x-transition:leave="transition ease-in duration-150" x-transition:leave-start="translate-y-0 opacity-100"--}}
-{{--         x-transition:leave-end="translate-y-1 opacity-0"--}}
-{{--         class="mt-2 px-4 pt-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">--}}
-{{--        {!! $navigation !!}--}}
-{{--    </nav>--}}
-{{--</div>--}}
+<nav x-show="showDocsNavigation" x-cloak=""
+     x-transition:enter="transition ease-out duration-200"
+     x-transition:enter-start="translate-y-1 opacity-0"
+     x-transition:enter-en
47DA
d="translate-y-0 opacity-100"
+     x-transition:leave="transition ease-in duration-150"
+     x-transition:leave-start="translate-y-0 opacity-100"
+     x-transition:leave-end="translate-y-1 opacity-0"
+     class="fixed top-12 left-0 z-40 w-full max-h-screen pb-36 overflow-y-auto bg-white mt-2 px-4 pt-4 border-b border-[#00aaa6] border-opacity-50 dark:border-opacity-90">
+    {!! $navigation !!}
+</nav>