wip

source/_nav/menu-item.blade.php

@@ -0,0 +1,18 @@
+<li class="list-reset pl-4">
+    @if ($url = is_string($item) ? $item : $item->url)
+        {{-- Menu item with URL--}}
+        <a href="{{ $page->url($url) }}"
+            class="{{ 'lvl' . $level }} {{ $page->isActiveParent($item) ? 'lvl' . $level . '-active' : '' }} {{ $page->isActive($url) ? 'active font-semibold text-blue' : '' }} nav-menu__item hover:text-blue"
+        >
+            {{ $label }}
+        </a>
+    @else
+        {{-- Menu item without URL--}}
+        <p class="nav-menu__item text-grey-dark">{{ $label }}</p>
+    @endif
+
+    @if (! is_string($item) && $item->children)
+        {{-- Recursively handle children --}}
+        @include('_nav.menu', ['items' => $item->children, 'level' => ++$level])
+    @endif
+</li>

source/_nav/menu-toggle.blade.php

@@ -0,0 +1,29 @@
+<button class="flex justify-center items-center bg-blue border border-blue h-10 mr-4 px-5 rounded-full lg:hidden focus:outline-none"
+    onclick="navMenu.toggle()"
+>
+    <svg id="js-nav-menu-show" xmlns="http://www.w3.org/2000/svg"
+        class="fill-current text-white h-9 w-4" viewBox="0 0 32 32"
+    >
+        <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
+    </svg>
+
+    <svg id="js-nav-menu-hide" xmlns="http://www.w3.org/2000/svg"
+        class="hidden fill-current text-white h-9 w-4" viewBox="0 0 36 30"
+    >
+        <polygon points="32.8,4.4 28.6,0.2 18,10.8 7.4,0.2 3.2,4.4 13.8,15 3.2,25.6 7.4,29.8 18,19.2 28.6,29.8 32.8,25.6 22.2,15 "/>
+    </svg>
+</button>
+
+@push('scripts')
+<script>
+    const navMenu = {
+        toggle() {
+            const menu = document.getElementById('js-nav-menu');
+            menu.classList.toggle('hidden');
+            menu.classList.toggle('lg:block');
+            document.getElementById('js-nav-menu-hide').classList.toggle('hidden');
+            document.getElementById('js-nav-menu-show').classList.toggle('hidden');
+        },
+    }
+</script>
+@endpush

source/_nav/menu.blade.php

@@ -0,0 +1,7 @@
+@php $level = $level ?? 0 @endphp
+
+<ul class="list-reset my-0">
+    @foreach ($items as $label => $item)
+        @include('_nav.menu-item')
+    @endforeach
+</ul>

source/_nav/search-input.blade.php

@@ -0,0 +1,47 @@
+<button
+    title="Start searching"
+    type="button"
+    class="flex md:hidden bg-grey-lightest hover:bg-blue-lightest justify-center items-center border border-grey rounded-full focus:outline-none h-10 px-3"
+    onclick="searchInput.toggle()"
+>
+    <img src="/assets/img/magnifying-glass.svg" alt="search icon" class="h-4 w-4 max-w-none">
+</button>
+
+<div id="js-search-input" class="docsearch-input__wrapper hidden md:block">
+    <label for="search" class="hidden">Search</label>
+
+    <input
+        id="docsearch-input"
+        class="docsearch-input relative block h-10 transition-fast w-full lg:w-1/2 xl:w-1/3 bg-grey-lightest outline-none rounded-full text-grey-darker border border-grey focus:border-blue-light ml-auto px-4 pb-0"
+        name="docsearch"
+        type="text"
+        placeholder="Search"
+    >
+
+    <button
+        class="md:hidden absolute pin-t pin-r h-full font-light text-3xl text-blue hover:text-blue-dark focus:outline-none -mt-px pr-7"
+        onclick="searchInput.toggle()"
+    >&times;</button>
+</div>
+
+@push('scripts')
+    @if ($page->docsearchApiKey && $page->docsearchIndexName)
+        <script type="text/javascript">
+            docsearch({
+                apiKey: '{{ $page->docsearchApiKey }}',
+                indexName: '{{ $page->docsearchIndexName }}',
+                inputSelector: '#docsearch-input',
+                debug: false // Set debug to true if you want to inspect the dropdown
+            });
+
+            const searchInput = {
+                toggle() {
+                    const menu = document.getElementById('js-search-input');
+                    menu.classList.toggle('hidden');
+                    menu.classList.toggle('md:block');
+                    document.getElementById('docsearch-input').focus();
+                },
+            }
+        </script>
+    @endif
+@endpush