Merge branch 'docs-add-mobile-nav' into 3.x

64robots · Apr 14, 2023 · ce58650 · ce58650
2 parents 9e113ee + 767000b
commit ce58650
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 23 deletions.
diff --git a/docs/_templates/components/navLink.blade.php b/docs/_templates/components/navLink.blade.php
@@ -2,10 +2,13 @@
     'branded' => false,
     'url' => '#',
     'label' => '',
+    'mobileNav' => false
 ])
 
 <a @class([
-    'f-h4 no-underline xs:hidden lg:inline',
+    'f-h4 no-underline',
+    'xs:hidden lg:inline' => !$mobileNav,
+    'block' => $mobileNav,
     'hover:text-link' => !$branded,
     'text-link hover:text-primary' => $branded
 ]) href="{{ $url }}">{{ $label }}</a>
diff --git a/docs/_templates/components/sidebar.blade.php b/docs/_templates/components/sidebar.blade.php
@@ -24,20 +24,17 @@ class="nav-close hover:opacity-60 h-18 w-18 absolute right-20"
         <svg class="h-18 w-18" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><defs><style>.close-icon-line{fill:none;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close_icon</title><line class="close-icon-line" x1="1" y1="1" x2="9" y2="9" stroke="currentColor"/><line class="close-icon-line" x1="9" y1="1" x2="1" y2="9" stroke="currentColor"/>
         </svg>
     </button>
-    <ul role="list">
-        @foreach ($tree as $key => $item)
-            @unless($key === '')
-                <li class="md:hidden">
-                    <a href="{{ $item['url'] }}" >{{ $item['title'] }}</a>
-                </li>
-            @endunless
-        @endforeach
-        <li class="mt-32">
-            <h2 class="f-doc-title strong">
-                {{ $tree[$currentSegment]['title'] ?? '' }}
-            </h2>
+    <ul role="list" class="flex flex-col flex-nowrap min-h-full py-32">
+        <li class="lg:hidden"><x-twilldocs::navLink url="/blog/" label="Blog" mobileNav="true" /></li>
+        <li class="mt-12 lg:hidden"><x-twilldocs::navLink url="/guides/" label="Guides" mobileNav="true" /></li>
+        <li class="mt-12 lg:hidden"><x-twilldocs::navLink url="/docs/" label="Docs" mobileNav="true" /></li>
+
+        @if (!empty($tree[$currentSegment]['items'] ?? []))
+            <li class="my-40 pt-20 border-t border-t-primary lg:my-0 lg:pt-0 lg:border-t-0">
+                <h2 class="f-doc-title strong">
+                    {{ $tree[$currentSegment]['title'] ?? '' }}
+                </h2>
 
-            @if (!empty($tree[$currentSegment]['items'] ?? []))
                 <ul class="core-list mt-30 f-sidebar subpixel-antialiased">
                     @php
                         $index = 0;
@@ -93,7 +90,11 @@ class="relative mt-12"
                         </li>
                     @endforeach
                 </ul>
-            @endif
-        </li>
+            </li>
+        @endif
+
+        <li class="mt-auto pt-20 border-t border-t-primary lg:hidden"><x-twilldocs::navLink url="/made" label="#MadeWithTwill" mobileNav="true" branded /></li>
+        <li class="mt-12 lg:hidden"><x-twilldocs::navLink url="https://demo.twill.io/" label="Demo" mobileNav="true" /></li>
+        <li class="mt-12 lg:hidden"><x-twilldocs::navLink url="https://discord.gg/cnWk7EFv8R" label="Chat" mobileNav="true" /></li>
     </ul>
 </nav>
diff --git a/docs/_templates/components/sidebarSimple.blade.php b/docs/_templates/components/sidebarSimple.blade.php
@@ -0,0 +1,35 @@
+<nav
+    class="sidebar sidebar--mobileOnly w-3-cols xl:w-240 bg-primary sticky top-80 h-screen-minus-header pr-32 pb-16 border-r border-primary overflow-x-hidden overflow-y-auto"
+    x-show="isMobile"
+    x-bind:inert="if (isMobile) {
+    if (openNav) {
+        return false
+    } else {
+        return true
+    }
+    } else { return true }"
+    x-bind:aria-hidden="if (isMobile) {
+        if (openNav) {
+            return false
+        } else {
+            return true
+        }
+    } else { return true }">
+    <button
+        class="nav-close hover:opacity-60 h-18 w-18 absolute right-20"
+        x-cloak
+        x-ref="closeMenu"
+        aria-label="close nav"
+        x-on:click="openNav = false;  $nextTick(() => $refs.openMenu.focus())">
+        <svg class="h-18 w-18" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><defs><style>.close-icon-line{fill:none;stroke-miterlimit:10;stroke-width:1.5px;}</style></defs><title>close_icon</title><line class="close-icon-line" x1="1" y1="1" x2="9" y2="9" stroke="currentColor"/><line class="close-icon-line" x1="9" y1="1" x2="1" y2="9" stroke="currentColor"/>
+        </svg>
+    </button>
+    <ul role="list" class="flex flex-col flex-nowrap min-h-full py-32">
+        <li><x-twilldocs::navLink url="/blog/" label="Blog" mobileNav="true" /></li>
+        <li class="mt-12"><x-twilldocs::navLink url="/guides/" label="Guides" mobileNav="true" /></li>
+        <li class="mt-12 mb-auto"><x-twilldocs::navLink url="/docs/" label="Docs" mobileNav="true" /></li>
+        <li class="mt-20 pt-20 border-t border-t-primary"><x-twilldocs::navLink url="/made" label="#MadeWithTwill" mobileNav="true" branded /></li>
+        <li class="mt-12"><x-twilldocs::navLink url="https://demo.twill.io/" label="Demo" mobileNav="true" /></li>
+        <li class="mt-12"><x-twilldocs::navLink url="https://discord.gg/cnWk7EFv8R" label="Chat" mobileNav="true" /></li>
+    </ul>
+</nav>
diff --git a/docs/_templates/layout.blade.php b/docs/_templates/layout.blade.php
@@ -84,13 +84,15 @@ class="overflow-x-hidden page--{{ Str::slug(Str::replace(['/', '.html'], ['-', '
         {!! $content !!}
         <x-twilldocs::grid-auto-generated :tree="$tree" :currentSegment="$currentSegment" :url="$url" />
       </div>
+      <x-twilldocs::sidebarSimple />
     @elseif ($currentSegment === 'blog' && strpos($url, 'index.html'))
       {{-- blog index --}}
       <div class="content markdown mt-68">
         <h1>{{$title}}</h1>
         {!! $content !!}
         <x-twilldocs::grid-auto-generated :tree="$tree" :currentSegment="$currentSegment" :url="$url" />
       </div>
+      <x-twilldocs::sidebarSimple />
     @elseif ($currentSegment === 'docs' || $currentSegment === 'guides')
       <div class="flex flex-row flex-nowrap justify-between">
         <x-twilldocs::sidebar :tree="$tree" :currentSegment="$currentSegment" :url="$url"/>
@@ -121,12 +123,13 @@ class="overflow-x-hidden page--{{ Str::slug(Str::replace(['/', '.html'], ['-', '
           @endif
         </div>
       </div>
-    @elseif (strpos($url, 'index.html'))
+    @elseif (strpos($url, 'index.html') || strpos($url, 'welcome.html'))
       {{-- home --}}
       <div class="content markdown mt-68">
         <h1>{{$title}}</h1>
         {!! $content !!}
       </div>
+      <x-twilldocs::sidebarSimple />
     @elseif ($currentSegment === 'blog')
       {{-- blog details --}}
       <div class="flex flex-row flex-nowrap">
@@ -135,12 +138,14 @@ class="overflow-x-hidden page--{{ Str::slug(Str::replace(['/', '.html'], ['-', '
           {!! $content !!}
         </div>
       </div>
+      <x-twilldocs::sidebarSimple />
     @else
       {{-- capture for any other page type --}}
       <div class="content markdown mt-68">
         <h1>{{$title}}</h1>
         {!! $content !!}
       </div>
+      <x-twilldocs::sidebarSimple />
     @endif
   </div>
 </div>

diff --git a/docs/_templates/style.css b/docs/_templates/style.css
@@ -39,18 +39,14 @@
   margin-left: 0 !important;
   z-index: 11;
   height: 100%;
-  padding-top: 30px;
+  padding-top: 28px;
   padding-left: 40px;
   min-width: 300px;
   width: 40%;
-  padding-bottom: 60px;
+  padding-bottom: 28px;
   transition: all 0.4s;
 }
 
-.isMobile .sidebar > ul {
-  padding-bottom: 60px;
-}
-
 .isMobile.openNav .sidebar {
   left: -10px;
 }