New Responsive Header mobile first

nuxt · Sep 20, 2019 · ee284a7 · ee284a7
1 parent 3468198
commit ee284a7
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 130 deletions.
diff --git a/assets/css/themes/light.css b/assets/css/themes/light.css
@@ -8,77 +8,6 @@
 
 body {
   @apply font-sans font-medium text-nuxt-gray;
-  & .header {
-    @apply bg-white;
-    & .header_logo {
-      transition: color 1s;
-    }
-    & .header_nav {
-      @apply bg-nuxt-gray;
-      transform: translateX(-100%);
-      transition-property: transform;
-      transition-duration: 1s;
-      transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-      transition-delay: .5s;
-      & .header_nav_link {
-        @apply text-white;
-        height: auto;
-        transform: translateX(-100%);
-        transition-property: transform, height;
-        transition-duration: 0.5s;
-        transition-timing-function: ease-in-out;
-        &:nth-child(1) { transition-delay: 0.2s; }
-        &:nth-child(2) { transition-delay: 0.3s; }
-        &:nth-child(3) { transition-delay: 0.4s; }
-        &:nth-child(4) { transition-delay: 0.5s; }
-        &:hover { @apply text-nuxt-lightgreen; }
-      }
-      & .nuxt-link-active {
-        @apply text-nuxt-lightgreen;
-      }
-    }
-    & .header_nav--open {
-      transform: translateX(0px);
-      transition-delay: 0s;
-      & .header_nav_link {
-        transform: translateX(0px);
-      }
-      & .header_subnav {
-        height: 0px;
-        padding: 0;
-        overflow: hidden;
-        transform: translateX(-100%);
-        transition: all 1s ease-in-out .5s;
-      }
-      & .header_subnav--open {
-        height: auto;
-        padding-top: 2rem;
-        padding-bottom: 1rem;
-        transform: translateX(0px);
-        transition: all 1s ease-in-out .5s;
-      }
-      & .header_nav_link--close {
-        transform: translateX(-100%);
-        height: 0px;
-      }
-    }
-    @media (min-width: 1024px) {
-      & .header_nav {
-        @apply bg-white;
-        transform: none;
-        & .header_nav_link {
-          @apply text-nuxt-gray;
-          transform: none;
-        }
-      }
-      & .header_nav--open {
-        transform: none;
-        & .header_nav_link {
-          transform: none;
-        }
-      }
-    }
-  }
   & .nui-select {
     @apply text-nuxt-gray bg-gray-200;
   }

diff --git a/components/partials/Aside.vue b/components/partials/Aside.vue
@@ -6,7 +6,7 @@
         <nui-caret-down v-else class="float-right mt-2 mr-1" />
         <span class="uppercase text-gray-500 ml-1">{{ breadcrumb.group }} :</span> {{ breadcrumb.title }}
       </a>
-      <nav class="pt-8 lg:overflow-y-auto border-t lg:block lg:pl-0 lg:pr-8 sticky?lg:h-(screen-24)" :class="{ hidden: !showNav }">
+      <nav class="pt-8 lg:overflow-y-auto lg:block lg:pl-0 lg:pr-8 sticky?lg:h-(screen-24)" :class="{ hidden: !showNav }">
         <p class="uppercase font-bold pb-6">
           {{ $store.state.lang.text.version }} <span class="text-nuxt-lightgreen">{{ $store.state.docVersion }}</span>
         </p>

diff --git a/components/partials/Header.vue b/components/partials/Header.vue
@@ -1,91 +1,165 @@
 <template>
-  <header class="header fixed top-0 right-0 left-0 z-20">
-    <nui-container class="border-b border-gray-300 lg:border-0">
-      <div class="flex py-6 lg:pt-8 items-end lg:items-center justify-between lg:border-b lg:border-gray-300">
-        <a href="#" class="flex p-2 -m-2 items-center justify-center z-10 lg:hidden hover:text-nuxt-lightgreen" @click.prevent="$emit('toggle', !mobileNav)">
-          <nui-times-icon v-if="mobileNav" class="block h-5 fill-current text-white" />
-          <nui-bars-icon v-else class="block h-5 fill-current text-nuxt-gray" />
-        </a>
-        <a class="header_logo lg:text-nuxt-gray block h-7 lg:h-10 lg:pt-1 z-10" :class="mobileNav ? 'text-white' : 'text-nuxt-gray'" :href="localePath('index')" @click.prevent="$router.push(localePath('index'))" @click.right.stop.prevent="$router.push(localePath('design'))">
-          <h1 class="m-0 h-0 w-0 overflow-hidden">NUXTJS</h1>
-          <nui-logo class="h-6 lg:h-auto" />
-        </a>
-        <nav class="header_nav lg:block lg:relative lg:pt-0 fixed top-0 bottom-0 left-0 right-0 pt-24 overflow-y-auto" :class="{'header_nav--open': mobileNav}">
-          <!-- Desktop Navigation -->
-          <ul class="hidden lg:flex lg:pt-1 xl:pt-0 container mx-auto text-center">
+  <div class="absolute">
+    <!-- Common Header -->
+    <header class="header border-b border-gray-300 lg:border-0" :class="action === 'search' ? 'py-4' : 'py-6 lg:py-0'">
+      <template v-if="action === ''">
+        <nui-container class="flex items-center justify-between lg:py-6">
+          <!-- Left Title -->
+          <a class="block text-nuxt-gray h-7 lg:h-10 lg:pt-1 z-10" :href="localePath('index')" @click.prevent="$router.push(localePath('index'))" @click.right.stop.prevent="$router.push(localePath('design'))">
+            <h1 class="m-0 h-0 w-0 overflow-hidden">NUXTJS</h1>
+            <nui-logo class="h-6 lg:h-auto" />
+          </a>
+          <!-- Center Navigation -->
+          <ul class="hidden lg:flex lg:pt-1 xl:pt-0 text-center">
             <li v-for="link in links" :key="link" class="header_nav_link xl:px-4 lg:py-0 lg:px-2 py-2">
               <nuxt-link class="block p-2 font-medium uppercase hover:no-underline hover:text-nuxt-lightgreen" :to="localePath({ name: 'section-slug', params: { section: link }})">
                 {{ $store.state.lang.links[link] || link }}
               </nuxt-link>
             </li>
           </ul>
-          <!-- Mobile Navigation -->
-          <ul class="lg:hidden container mx-auto text-center">
-            <li v-for="link in links" :key="link" class="header_nav_link xl:px-4 lg:py-0 lg:px-2 py-2" :class="{'header_nav_link--close': currentSection !== '' && currentSection !== link}">
-              <a class="text-lg block p-4 font-medium uppercase hover:no-underline" :class="{'bg-nuxt-lightgreen text-nuxt-gray': currentSection === link, 'hover:text-nuxt-lightgreen': currentSection !== link}" :href="localePath({ name: 'section-slug', params: { section: link }})" @click.prevent="currentSection = (currentSection === link ? '' : link)">
-                <nui-arrow-left v-show="currentSection === link" class="absolute float-left h-6"/>
-                {{ $store.state.lang.links[link] || link }}
-              </a>
-              <div v-for="(group, index) in $store.state.menu[link]" :key="index" class="header_subnav" :class="{'header_subnav--open': currentSection === link}">
-                <h3 :key="`title-${index}`" class="uppercase text-gray-500 pb-2">
-                  {{ group.title }}
-                </h3>
-                <ul :key="`list-${index}`">
-                  <li v-for="link in group.links" :key="link.to" class="py-2">
-                    <nuxt-link class="text-gray-200 hover:text-nuxt-lightgreen" :class="{'text-nuxt-lightgreen': path === menu + link.to}" :to="menu + link.to" exact>
-                      {{ link.name }}
-                    </nuxt-link>
-                  </li>
-                </ul>
-              </div>
+          <!-- Right Action -->
+          <a href="#" class="block md:hidden flex p-2 -m-2 items-center justify-center text-nuxt-gray hover:text-nuxt-lightgreen z-10 lg:hidden" @click.prevent="$emit('change', 'search')">
+            <nui-search-icon class="block h-5 fill-current" />
+          </a>
+          <nui-search class="hidden md:block -my-2"/>
+        </nui-container>
+        <nui-container class="hidden lg:block">
+          <hr class="border-b border-t-0 border-gray-300 h-0"/>
+        </nui-container>
+      </template>
+      <nui-container v-else class="flex justify-between lg:hidden">
+        <!-- Left Title -->
+        <nui-search v-if="action === 'search'" class="w-full pr-4"/>
+        <div v-else class="flex items-end">
+          <component :is="'nui-' + action + '-icon'" class="block h-6 text-nuxt-lightgreen fill-current" />
+          <span class="block text-lg font-medium uppercase text-nuxt-gray pl-4 h-6">{{ $store.state.lang.links[action] || action }}</span>
+        </div>
+        <!-- Right Action -->
+        <a href="#" class="block flex p-2 -m-2 items-center justify-center text-nuxt-gray hover:text-nuxt-lightgreen z-10 lg:hidden" :class="action === 'search' ? 'pt-3' : ''" @click.prevent="$emit('change', '')">
+          <nui-times-icon class="block h-5 fill-current"/>
+        </a>
+      </nui-container>
+    </header>
+    <!-- Mobile Main Navigation -->
+    <nav class="header_mobile_nav block lg:hidden">
+      <nui-container class="flex justify-between">
+        <a v-for="link in links" :key="link" class="block md:flex p-2 md:p-4 text-nuxt-gray hover:no-underline hover:text-nuxt-lightgreen text-center visited:text-nuxt-gray" :href="localePath({ name: 'section-slug', params: { section: action }})" @click.prevent="$emit('change', action === link ? '' : link)">
+          <component :is="'nui-' + link + '-icon'" class="inline-block h-5 fill-current mb-1" :class="{'text-nuxt-lightgreen': action === link}"/>
+          <span class="block text-xs md:text-base md:pl-3 font-medium text-nuxt-gray">{{ $store.state.lang.links[link] || link }}</span>
+        </a>
+      </nui-container>
+    </nav>
+    <!-- Mobile Aside Navigation -->
+    <div class="header_mobile_aside block lg:hidden" :class="{'header_mobile_aside--open': sublinks.length}">
+      <nui-container>
+        <transition-group v-for="(group, index) in sublinks" :key="index" tag="div" name="list" class="header_mobile_aside_group">
+          <h3 :key="`title-${index}`" class="uppercase text-gray-500 pb-2">
+            {{ group.title }}
+          </h3>
+          <ul :key="`list-${index}`" class="pb-6">
+            <li v-for="l in group.links" :key="l.to" class="py-2">
+              <nuxt-link class="block text-gray-700 hover:text-nuxt-lightgreen" :class="{'text-nuxt-lightgreen': path === locale + l.to}" :to="locale + l.to" exact>
+                {{ l.name }}
+              </nuxt-link>
             </li>
           </ul>
-        </nav>
-        <nui-search class="lg:block hidden" />
-        <a href="#" class="block flex p-2 -m-2 items-center justify-center text-nuxt-gray hover:text-nuxt-lightgreen z-10 lg:hidden" @click.prevent="openSearch = !openSearch">
-          <nui-search-icon class="block h-5 fill-current" />
-        </a>
-      </div>
-    </nui-container>
-  </header>
+        </transition-group>
+      </nui-container>
+    </div>
+  </div>
 </template>
 
 <script>
 import nuiLogo from '@/components/svg/Nuxtjs'
-import nuiBarsIcon from '@/components/svg/Bars'
+import nuiExamplesIcon from '@/components/svg/Code'
+import nuiGuideIcon from '@/components/svg/Books'
+import nuiApiIcon from '@/components/svg/List'
+import nuiFaqIcon from '@/components/svg/Faq'
 import nuiTimesIcon from '@/components/svg/Times'
 import nuiSearchIcon from '@/components/svg/Search'
 import nuiSearch from '@/components/partials/Search'
 import nuiArrowLeft from '@/components/svg/ArrowLeft'
 
 export default {
   components: {
-    nuiBarsIcon,
     nuiTimesIcon,
+    nuiExamplesIcon,
+    nuiGuideIcon,
+    nuiApiIcon,
+    nuiFaqIcon,
     nuiLogo,
     nuiSearchIcon,
     nuiSearch,
     nuiArrowLeft
   },
   model: {
-    prop: 'mobileNav',
-    event: 'toggle'
+    prop: 'action',
+    event: 'change'
   },
   props: {
-    mobileNav: {
-      type: Boolean,
+    action: {
+      type: String,
       required: true
     }
   },
   data () {
     return {
-      currentSection: '',
-      links: ['guide', 'api', 'examples', 'faq'],
-      openSearch: false
+      links: ['guide', 'api', 'examples', 'faq']
     }
   },
   computed: {
-    menu () { return (this.$i18n && this.$i18n.locale !== 'en' ? `/${this.$i18n.locale}/` : '/') + this.$route.params.section }
+    path () { return this.$route.path.slice(-1) === '/' ? this.$route.path.slice(0, -1) : this.$route.path },
+    locale () { return (this.$i18n && this.$i18n.locale !== 'en' ? `/${this.$i18n.locale}/` : '/') + this.action },
+    sublinks () { return this.$store.state.menu[this.action] || [] }
+  },
+  methods: {
+    nav (section) {
+      this.currentSection = (this.currentSection === section ? '' : section)
+      this.mobileNav = !this.mobileNav
+    }
   }
 }
 </script>
+
+<style>
+.header {
+  @apply fixed bg-white top-0 left-0 right-0 z-30;
+}
+  .header_mobile_nav {
+    @apply fixed bg-white border-t border-gray-300 left-0 bottom-0 right-0 z-30;
+  }
+  .header_mobile_aside {
+    @apply fixed left-0 bg-gray-100 pt-6 z-20 w-full overflow-y-auto;
+    top: 72px;
+    bottom: 60px;
+    transform: translateX(-100%);
+    transition-property: transform;
+    transition-duration: 1s;
+    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    /* transition-delay: .5s; */
+    & .header_mobile_aside_group {
+      transform: translateX(-100%);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: ease-in-out;
+      &:nth-child(1) { transition-delay: 0.2s; }
+      &:nth-child(2) { transition-delay: 0.3s; }
+      &:nth-child(3) { transition-delay: 0.4s; }
+      &:nth-child(4) { transition-delay: 0.5s; }
+    }
+  }
+  .header_mobile_aside--open {
+    transform: translateX(0px);
+    transition-delay: 0s;
+    & .header_mobile_aside_group {
+      transform: translateX(0px);
+    }
+  }
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>
diff --git a/components/partials/Search.vue b/components/partials/Search.vue
@@ -66,7 +66,7 @@ export default {
 
 <style lang="scss">
 .nui-search-input {
-  @apply bg-gray-200 text-nuxt-gray font-medium px-4 pl-10 rounded-full h-10 outline-none;
+  @apply bg-gray-200 text-nuxt-gray font-medium px-4 pl-10 rounded-full h-10 outline-none w-full;
   ::placeholder {
     @apply text-gray-600;
   }

diff --git a/components/svg/Books.vue b/components/svg/Books.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="books" class="svg-inline--fa fa-books fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M96 0H32A32 32 0 0 0 0 32v64h128V32A32 32 0 0 0 96 0zM0 384h128V128H0zm0 96a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64H0zm513.62-17.78L401.08 42.71l-60.26 16.14 112.35 418.8c.11.39.2.79.29 1.18l60.29-16.15c-.04-.15-.09-.3-.13-.46zM160 480a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64H160zM256 0h-64a32 32 0 0 0-32 32v64h124.79l-8-29.65a23.94 23.94 0 0 1 11.17-27V32A32 32 0 0 0 256 0zm-96 384h128V128H160z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M0 416h128v-32H0zm0-288h128V96H0zm575.17 317.65L460.39 17.78a23.89 23.89 0 0 0-29.18-17h-.09L415.73 5a24 24 0 0 0-16.9 29.36l114.79 427.86a23.89 23.89 0 0 0 29.18 17h.09l15.38-4.22a24 24 0 0 0 16.9-29.35zM160 416h128v-32H160zM338.39 49.78a23.89 23.89 0 0 0-29.18-17h-.09L293.73 37a24 24 0 0 0-16.9 29.36l8 29.65H160v32h128V108l103.62 386.22a23.89 23.89 0 0 0 29.18 17h.09l15.38-4.22a24 24 0 0 0 16.9-29.33z"></path></g></svg>
+</template>
diff --git a/components/svg/Code.vue b/components/svg/Code.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="code" class="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M422.12 18.16a12 12 0 0 1 8.2 14.9l-136.5 470.2a12 12 0 0 1-14.89 8.2l-61-17.7a12 12 0 0 1-8.2-14.9l136.5-470.2a12 12 0 0 1 14.89-8.2z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M636.23 247.26l-144.11-135.2a12.11 12.11 0 0 0-17 .5L431.62 159a12 12 0 0 0 .81 17.2L523 256l-90.59 79.7a11.92 11.92 0 0 0-.81 17.2l43.5 46.4a12 12 0 0 0 17 .6l144.11-135.1a11.94 11.94 0 0 0 .02-17.54zm-427.8-88.2l-43.5-46.4a12 12 0 0 0-17-.5l-144.11 135a11.94 11.94 0 0 0 0 17.5l144.11 135.1a11.92 11.92 0 0 0 17-.5l43.5-46.4a12 12 0 0 0-.81-17.2L117 256l90.6-79.7a11.92 11.92 0 0 0 .83-17.24z"></path></g></svg>
+</template>
diff --git a/components/svg/Faq.vue b/components/svg/Faq.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="comments-alt" class="svg-inline--fa fa-comments-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M352 287.9H162.3L79.5 350a9.7 9.7 0 0 1-15.5-7.8V288a64.06 64.06 0 0 1-64-64V64A64.06 64.06 0 0 1 64 0h288a64.06 64.06 0 0 1 64 64v160a63.91 63.91 0 0 1-64 63.9z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M576 224v160a64.06 64.06 0 0 1-64 64h-32v54.3a9.7 9.7 0 0 1-15.5 7.8L381.7 448H256a64.06 64.06 0 0 1-64-64v-64h160a96.15 96.15 0 0 0 96-96v-64h64a64.06 64.06 0 0 1 64 64z"></path></g></svg>
+</template>
diff --git a/components/svg/List.vue b/components/svg/List.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="clipboard-list" class="svg-inline--fa fa-clipboard-list fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M336 64h-80a64 64 0 0 1 64 64H64a64 64 0 0 1 64-64H48a48 48 0 0 0-48 48v352a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V112a48 48 0 0 0-48-48zM96 424a24 24 0 1 1 24-24 23.94 23.94 0 0 1-24 24zm0-96a24 24 0 1 1 24-24 23.94 23.94 0 0 1-24 24zm0-96a24 24 0 1 1 24-24 23.94 23.94 0 0 1-24 24zm224 176a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-16a8 8 0 0 1 8-8h144a8 8 0 0 1 8 8zm0-96a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-16a8 8 0 0 1 8-8h144a8 8 0 0 1 8 8zm0-96a8 8 0 0 1-8 8H168a8 8 0 0 1-8-8v-16a8 8 0 0 1 8-8h144a8 8 0 0 1 8 8z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M96 376a24 24 0 1 0 24 24 23.94 23.94 0 0 0-24-24zm0-96a24 24 0 1 0 24 24 23.94 23.94 0 0 0-24-24zm0-96a24 24 0 1 0 24 24 23.94 23.94 0 0 0-24-24zM256 64a64 64 0 0 0-128 0 64 64 0 0 0-64 64h256a64 64 0 0 0-64-64zm-64 24a24 24 0 1 1 24-24 23.94 23.94 0 0 1-24 24z"></path></g></svg>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <nui-header v-model="mobileNav" />
-    <main class="lg:block relative pt-16 lg:pt-24" :class="{'hidden': mobileNav}">
+    <nui-header v-model="action" />
+    <main class="lg:block relative pt-16 lg:pt-24" :class="{'hidden': action}">
       <!-- <event-info/> -->
       <nuxt />
     </main>
-    <nui-footer class="lg:block" :class="{'hidden': mobileNav}" />
+    <nui-footer class="pb-16 lg:pb-0 lg:block" :class="{'hidden': action}" />
   </div>
 </template>
 
@@ -20,12 +20,12 @@ export default {
   },
   data () {
     return {
-      mobileNav: false
+      action: ''
     }
   },
   watch: {
     $route () {
-      this.mobileNav = false
+      this.action = ''
     }
   },
   head () {

diff --git a/pages/_section.vue b/pages/_section.vue
@@ -3,7 +3,7 @@
     <section class="lg:bg-gray-100 rounded py-6 sm:p-6"> -->
   <nui-container>
     <div class="lg:flex">
-      <nui-aside />
+      <nui-aside class="hidden lg:block"/>
       <div class="min-h-screen w-full lg:static lg:max-h-full lg:overflow-visible lg:w-3/4">
         <nuxt-child />
       </div>