Show search on mobile (#69)

* Show search on mobile

* Remove newline

source/_nav/search-input.blade.php

@@ -7,7 +7,7 @@
     <img src="/docs/assets/img/magnifying-glass.svg" alt="search icon" class="max-w-none w-4 h-4">
 </button> --}}
 
-<div id="js-search-input" class="lg:px-6 lg:w-3/4 xl:px-12 flex-grow w-full">
+<div id="js-search-input" class="hidden md:block pt-6 lg:pt-0 lg:px-6 lg:w-3/4 xl:px-12 flex-grow w-full">
     <div class=" relative rounded-md">
         <span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;"><input id="docsearch" class="focus:outline-0 ds-input block w-full py-2 pl-10 pr-4 leading-normal placeholder-gray-600 transition-colors duration-100 ease-in-out bg-gray-100 border border-transparent rounded-md" type="text" placeholder="Search the documentation" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" style="position: relative; vertical-align: top;" dir="auto"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Inter var, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;">min</pre><span class="ds-dropdown-menu ds-with-1" style="position: absolute; top: 100%; z-index: 100; left: 0px; right: auto; display: none;" role="listbox" id="algolia-autocomplete-listbox-0"><div class="ds-dataset-1"></div></span></span>
         <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">

source/_partials/header-docs.blade.php

@@ -1,11 +1,11 @@
 <div x-data="navMenu()" class="relative bg-white" data-turbolinks-permanent>
-  <div class="sm:px-6 md:justify-start md:space-x-10 flex items-center justify-between px-4 pt-3 pb-6">
+  <div class="sm:px-6 md:justify-start md:space-x-10 flex flex-wrap items-center justify-between px-4 pt-3 pb-2 lg:pb-6">
-    <div class="lg:w-0 lg:flex-1">
+    <div class="flex-grow lg:w-0 lg:flex-1">
       <a href="{{ $page->baseUrl }}" class="flex" data-turbolinks="false">
         <img src="/assets/img/tenancyforlaravel.svg" alt="" style="height: 70px">
       </a>
     </div>
-    <div class="md:hidden -my-2 -mr-2">
+    <div class="flex-grow md:hidden -my-2 -mr-2 flex justify-end">
       <button @click="toggle()" type="button"
         class="hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md">
         <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
@@ -13,7 +13,7 @@
         </svg>
       </button>
     </div>
-    <nav class="md:flex flex-grow hidden">
+    <nav class="flex-basis-full md:flex-basis-auto md:flex flex-grow">
       @include('_nav.search-input')
     </nav>
     <div class="md:flex md:flex-1 lg:w-0 items-center justify-end hidden space-x-8">
@@ -72,11 +72,13 @@
           toggle() {
               const menu = document.getElementById('js-nav-menu');
               menu.classList.toggle('hidden');
-              menu.classList.toggle('lg:block');
+              menu.classList.toggle('block')
-              mobileMenuOpen = !mobileMenuOpen;
+
+              const search = document.getElementById('js-search-input');
+              search.classList.toggle('hidden');
+
+              this.mobileMenuOpen = !this.mobileMenuOpen;
           },
-
-
         }
     }
 </script>

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin       = require('tailwindcss/plugin')
 
 module.exports = {
   purge: [
@@ -14,5 +15,19 @@ module.exports = {
   },
   plugins: [
     require('@tailwindcss/ui'),
+    plugin(function({ addUtilities }) {
+      const flexBasis = {
+        '.flex-basis-full': {
+          'flex-basis': '100%',
+        },
+        '.flex-basis-auto': {
+          'flex-basis': 'auto',
+        },
+      }
+
+      addUtilities(flexBasis, {
+        variants: ['responsive'],
+      })
+    }),
   ]
 }