style: Update TheHeader to use DocSearch button

Author: ktquez

src/.vuepress/theme/components/TheHeader.vue

@@ -14,49 +14,57 @@
       itemprop="sameAs"
       :content="social.link"
     >
-    <div class="flex flex-wrap w-full">
+    <div class="flex flex-wrap w-full md:justify-between md:flex-no-wrap">
       <div
-        class="flex items-center justify-end w-1/5 h-16 md:pl-0 md:w-1/12 lg:w-3/12"
+        class="flex items-center justify-end"
         :class="{'header-logo--bg': bgSidebar, 'container-layout-pl lg:w-2/7': hasSidebar }"
       >
         <div class="w-full">
           <Logo />
         </div>
       </div>
       <div
-        class="flex items-center flex-grow-0 w-3/5 h-16 md:pl-4 lg:pl-0 md:pr-0 md:w-auto md:flex-grow"
-        :class="{ 'w-4/5': !hasSidebar }"
+        class="flex items-center flex-1"
+        :class="{ 'justify-between': hasSidebar, 'justify-end': !hasSidebar }"
       >
         <div
-          class="w-full"
-          :class="{ 'md:ml-8': hasSidebar }"
+          class="flex items-center w-full md:mr-8 md:w-auto"
+          :class="{
+            'justify-end': !hasSidebar,
+            'md:w-full md:max-w-lg lg:max-w-3xl': hasSidebar,
+          }"
         >
-          <AlgoliaSearch
-            v-if="isAlgoliaSearch"
-            :options="$themeConfig.algolia"
-          />
+          <div
+            class="w-full"
+            :class="{ 'md:ml-8': hasSidebar }"
+          >
+            <AlgoliaSearch
+              v-if="isAlgoliaSearch"
+              :options="$themeConfig.algolia"
+            />
+          </div>
         </div>
-      </div>
-      <div
-        v-if="hasSidebar"
-        class="flex items-center justify-end w-1/5 md:hidden"
-      >
-        <button
-          type="button"
-          class="flex px-4 py-3 mr-1 md:hidden"
-          aria-controls="s-sidebar-wrapper"
-          :aria-label="menuButtonAriaLabel"
-          :aria-expanded="isSidebarOpen.toString()"
-          @click="$emit('toggle-sidebar')"
+        <div
+          v-if="hasSidebar"
+          class="flex items-center justify-end md:hidden"
         >
-          <vp-icon
-            :name="isSidebarOpen ? 'close' : 'menu'"
-            size="23"
-          />
-        </button>
+          <button
+            type="button"
+            class="flex px-4 py-3 mr-1 md:hidden"
+            aria-controls="s-sidebar-wrapper"
+            :aria-label="menuButtonAriaLabel"
+            :aria-expanded="isSidebarOpen.toString()"
+            @click="$emit('toggle-sidebar')"
+          >
+            <vp-icon
+              :name="isSidebarOpen ? 'close' : 'menu'"
+              size="23"
+            />
+          </button>
+        </div>
       </div>
       <div
-        class="flex items-center h-16 header-nav md:justify-end md:flex-grow"
+        class="flex items-center h-16 header-nav"
         :class="{ 'container-layout-pr': hasSidebar }"
       >
         <TheNavigation />
@@ -121,10 +129,6 @@ export default {
     height: 65px;
   }
 
-  @media (max-width: theme('screens.lg')) {
-    @apply pl-1 pr-3;
-  }
-
   &-logo--bg {
     @media (min-width: theme('screens.lg')) {
       @apply bg-page-gradient-left;

src/.vuepress/theme/components/TheNavigation.vue

@@ -16,7 +16,7 @@
           <a
             :href="href"
             :aria-current="isActive && $route.path.indexOf(item.link) === 0 ? 'page' : null"
-            class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
+            class="flex px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
             :class="{ 'active border-accent-primary': isActive && $route.path.indexOf(item.link) === 0 }"
             @click="navigate"
           >
@@ -26,7 +26,7 @@
       </li>
       <li>
         <ExternalLink
-          class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
+          class="flex items-center px-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
           :href="`https://github.com/vue-a11y`"
           label="Github"
         />
@@ -44,7 +44,7 @@ export default {
 <style lang="scss">
 .the-nav {
   &-link {
-    padding-top: 1rem;
+    padding-top: 1.2rem;
     padding-bottom: 1.2rem;
   }
 }

src/.vuepress/theme/global-components/ExternalLink.vue

@@ -4,7 +4,7 @@
     target="_blank"
     rel="noopener noreferrer"
   >
-    {{ label }}
+    <span class="mr-1">{{ label }}</span>
     <span class="sr-only">({{ $themeLocaleConfig.externalLinkText }})</span>
     <OutboundLink />
   </a>

src/.vuepress/theme/layouts/Full.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-layout">
-    <TheHeader class="md:px-4" />
+    <TheHeader class="pl-1 pr-3 md:px-4" />
     <TheMain>
       <slot>
         <component :is="$frontmatter.view || 'Home'" />

src/.vuepress/theme/layouts/Layout.vue

@@ -4,7 +4,7 @@
       has-sidebar
       bg-sidebar
       :is-sidebar-open="isSidebarOpen"
-      class="relative z-10"
+      class="relative"
       @toggle-sidebar="toggleSidebar"
     />
 
@@ -96,7 +96,7 @@ export default {
   }
 
   @media (max-width: theme('screens.md')) {
-    height: calc(100vh - 129px);
+    height: calc(100vh - 118px);
   }
 
   @screen md {