feat: togglable dropdown on mobile

vuejs · Apr 16, 2018 · 650089d · 650089d
1 parent 4bf15cb
commit 650089d
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 112 deletions.
diff --git a/lib/default-theme/DropdownLink.vue b/lib/default-theme/DropdownLink.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="dropdown-wrapper" :class="{ open }">
+    <div class="dropdown-title" @click="toggle">
+      <span class="title">{{ item.text }}</span>
+      <span class="arrow"></span>
+    </div>
+    <ul class="nav-dropdown">
+      <li
+        class="dropdown-item"
+        v-for="subItem in item.items"
+        :key="subItem.link">
+        <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+        <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
+          <li
+            class="dropdown-subitem"
+            v-for="childSubItem in subItem.items"
+            :key="childSubItem.link">
+            <nav-link :item="childSubItem"></nav-link>
+          </li>
+        </ul>
+        <nav-link v-else :item="subItem"></nav-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import { isExternal, ensureExt } from './util'
+  import NavLink from './NavLink.vue'
+
+  export default {
+    components: { NavLink },
+    data() {
+      return {
+        open: true
+      }
+    },
+    props: {
+      item: {
+        required: true
+      }
+    },
+    methods: {
+      toggle() {
+        this.open = !this.open
+      }
+    }
+  }
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.dropdown-wrapper
+  .dropdown-title
+    .arrow
+      display inline-block
+      vertical-align middle
+      margin-top -1px
+      margin-left 6px
+      width 0
+      height 0
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 5px solid #ccc
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid #eee
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        height 1.7rem
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 4px solid transparent
+            border-bottom 4px solid transparent
+            position absolute
+            top calc(50% - 3px)
+            left 10px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    &:not(.open)
+      .dropdown-title .arrow
+        border-top 4px solid transparent
+        border-bottom 4px solid transparent
+        border-left 5px solid #ccc
+      .nav-dropdown
+        display none
+    .nav-dropdown
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          height 2rem
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    &:hover .nav-dropdown
+      display block
+    .nav-dropdown
+      display none
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color #fff
+      padding 10px 0
+      border 1px solid #ddd
+      border-bottom-color #ccc
+      text-align left
+      border-radius 0.25rem
+      white-space nowrap
+      margin 0
+</style>
diff --git a/lib/default-theme/NavLink.vue b/lib/default-theme/NavLink.vue
@@ -1,6 +1,6 @@
 <template>
   <router-link
-    class="router-link"
+    class="nav-link"
     :to="link"
     v-if="!isExternal(link)"
     :exact="link === '/'"
@@ -9,7 +9,7 @@
     v-else
     :href="link"
     target="_blank"
-    class="router-link"
+    class="nav-link"
     rel="noopener noreferrer"
   >{{ item.text }}</a>
 </template>

diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
@@ -5,29 +5,9 @@
       class="nav-item"
       v-for="item in userLinks"
       :key="item.link">
-      <div
+      <dropdown-link
         v-if="item.type === 'links'"
-        class="dropdown-wrapper">
-        <span class="dropdown-title">{{ item.text }}</span>
-        <span class="arrow"></span>
-        <ul class="nav-dropdown">
-          <li
-            class="dropdown-item"
-            v-for="subItem in item.items"
-            :key="subItem.link">
-            <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-            <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
-              <li
-                class="dropdown-subitem"
-                v-for="childSubItem in subItem.items"
-                :key="childSubItem.link">
-                <nav-link :item="childSubItem"></nav-link>
-              </li>
-            </ul>
-            <nav-link v-else :item="subItem"></nav-link>
-          </li>
-        </ul>
-      </div>
+        :item="item"></dropdown-link>
       <nav-link v-else :item="item"></nav-link>
     </div>
     <!-- github link -->
@@ -46,9 +26,10 @@
 import OutboundLink from './OutboundLink.vue'
 import { isActive, resolveNavLinkItem } from './util'
 import NavLink from './NavLink.vue'
+import DropdownLink from './DropdownLink.vue'
 
 export default {
-  components: { OutboundLink, NavLink },
+  components: { OutboundLink, NavLink, DropdownLink },
   computed: {
     userLinks () {
       return (this.$site.themeConfig.nav || []).map((link => {
@@ -89,59 +70,6 @@ export default {
     margin-left 1.5rem
     font-weight 500
     line-height 2rem
-    .dropdown-wrapper
-      &:hover .nav-dropdown
-          display block
-      .arrow
-        display inline-block
-        vertical-align middle
-        margin-top -1px
-        margin-left 6px
-        width 0
-        height 0
-        border-left 4px solid transparent
-        border-right 4px solid transparent
-        border-top 5px solid #ccc
-      .nav-dropdown
-        .dropdown-item
-          color inherit
-          line-height 1.7rem
-          h4
-            margin 0.45rem 0 0
-            border-top 1px solid #eee
-            padding 0.45rem 1.5rem 0 1.25rem
-          .dropdown-subitem-wrapper
-            padding 0
-            list-style none
-            .dropdown-subitem
-              font-size 0.9em
-          a
-            display block
-            height 1.7rem
-            line-height 1.7rem
-            position relative
-            border-bottom none
-            font-weight 400
-            margin-bottom 0
-            padding 0 1.5rem 0 1.25rem
-            &:hover
-              color $accentColor
-            &.router-link-active
-              color $accentColor
-              &::after
-                content ""
-                width 0
-                height 0
-                border-left 5px solid $accentColor
-                border-top 4px solid transparent
-                border-bottom 4px solid transparent
-                position absolute
-                top calc(50% - 3px)
-                left 10px
-          &:first-child h4
-            margin-top 0
-            padding-top 0
-            border-top 0
   .github-link
     margin-left 1.5rem
 
@@ -157,20 +85,4 @@ export default {
         color $textColor
         margin-bottom -2px
         border-bottom 2px solid lighten($accentColor, 5%)
-    .nav-dropdown
-      display none
-      box-sizing border-box;
-      max-height calc(100vh - 2.7rem)
-      overflow-y auto
-      position absolute
-      top 100%
-      right 0
-      background-color #fff
-      padding 10px 0
-      border 1px solid #ddd
-      border-bottom-color #ccc
-      text-align left
-      border-radius 0.25rem
-      white-space nowrap
-      margin 0
 </style>
diff --git a/lib/default-theme/Sidebar.vue b/lib/default-theme/Sidebar.vue
@@ -87,24 +87,6 @@ function resolveOpenGroupIndex (route, items) {
       font-weight 600
       font-size 1.1em
       padding 0.5rem 0 0.5rem 1.5rem
-    .nav-item .dropdown-wrapper
-      .dropdown-title
-        display inline-block
-        margin-bottom 0.5rem
-      .nav-dropdown
-        .dropdown-item
-          h4
-            border-top 0
-            margin-top 0
-            padding-top 0
-          h4, & > a
-            font-size 15px
-            height 2rem
-            line-height 2rem
-          .dropdown-subitem
-            font-size 14px
-            padding-left 1rem
-
   .sidebar-links
     margin-top 1.5rem