From 94114352471f006efda2cdb96e09cfa7de11cf19 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Fri, 22 Oct 2021 12:15:12 +0800
Subject: [PATCH] feat: add theme color and support mobile devices

---
 assets/styles/global.styl | 11 +++++-
 assets/styles/post.styl   | 32 ++++++++++++++++
 components/OneMenu.vue    | 78 ++++++++++++++++++++++++++++++++++-----
 layouts/default.vue       | 17 ++++++++-
 nuxt.config.js            |  3 ++
 5 files changed, 128 insertions(+), 13 deletions(-)

diff --git a/assets/styles/global.styl b/assets/styles/global.styl
index 6957da3..6275172 100644
--- a/assets/styles/global.styl
+++ b/assets/styles/global.styl
@@ -35,11 +35,18 @@ input
   font inherit
   color inherit
 
-a:focus
-  outline none
+a
+  -webkit-tap-highlight-color transparent
+
+  &:focus
+    outline none
 
 main
   line-height 1.5
 
 .DocSearch-Container
   backdrop-filter blur(4px)
+
+@media (max-width 480px)
+  body
+    margin 0
diff --git a/assets/styles/post.styl b/assets/styles/post.styl
index b8b87f3..b2be351 100644
--- a/assets/styles/post.styl
+++ b/assets/styles/post.styl
@@ -141,6 +141,8 @@ margin-y($top, $bottom = $top)
       backdrop-filter blur(4px)
 
       th
+        position relative
+
         &::after
           content ""
           position absolute
@@ -353,3 +355,33 @@ margin-y($top, $bottom = $top)
   12%
   80%
     background-color #f2f7ff
+
+@media (max-width 480px)
+  .post
+    padding 30px
+
+  [data-markdown]
+    h1
+    h1&
+      font-size 24px
+
+    h2
+    h2&
+      font-size 20px
+
+    h3
+    h3&
+      font-size 18px
+
+    h4
+    h4&
+      font-size 16px
+    h5
+    h5&
+      font-size 14px
+
+    table&
+      display block
+      max-width 100%
+      width fit-content
+      overflow-x auto
diff --git a/components/OneMenu.vue b/components/OneMenu.vue
index 20b7c53..b072852 100644
--- a/components/OneMenu.vue
+++ b/components/OneMenu.vue
@@ -1,9 +1,13 @@
 <template>
-<aside class="one-nav">
+<aside
+  v-outside="collapseMenu"
+  class="one-nav"
+  :class="{ expanded }"
+>
   <veui-menu
     class="one-menu"
     :items="menuItems"
-    :expanded.sync="expanded"
+    :expanded.sync="menuExpanded"
   >
     <template #before>
       <header>
@@ -29,6 +33,12 @@
         <section class="search">
           <one-search/>
         </section>
+        <button
+          class="toggle"
+          @click="toggleMenu"
+        >
+          <veui-icon name="hamburger"/>
+        </button>
       </header>
     </template>
     <template #item-label="{ label, sub }">
@@ -41,16 +51,23 @@
 <script>
 import i18n from '../common/i18n'
 import OneSearch from './OneSearch'
-import { Menu } from 'veui'
+import { Menu, Icon } from 'veui'
+import outside from 'veui/directives/outside'
+import 'veui-theme-dls-icons/hamburger'
 
 export default {
   name: 'one-menu',
+  directives: {
+    outside
+  },
   components: {
     'one-search': OneSearch,
-    'veui-menu': Menu
+    'veui-menu': Menu,
+    'veui-icon': Icon
   },
   mixins: [i18n],
   props: {
+    expanded: Boolean,
     nav: {
       type: Array,
       default () {
@@ -60,7 +77,7 @@ export default {
   },
   data () {
     return {
-      expanded: []
+      menuExpanded: []
     }
   },
   computed: {
@@ -80,7 +97,7 @@ export default {
     }
   },
   created () {
-    this.expanded = this.menuItems.map(({ name }) => name)
+    this.menuExpanded = this.menuItems.map(({ name }) => name)
   },
   methods: {
     getTitleDetail (title) {
@@ -105,6 +122,12 @@ export default {
         disabled,
         children: children ? children.map(child => this.normalizeItem(child, fullSlug)) : []
       }
+    },
+    toggleMenu () {
+      this.$emit('toggle', !this.expanded)
+    },
+    collapseMenu () {
+      this.$emit('toggle', false)
     }
   }
 }
@@ -122,6 +145,7 @@ export default {
 .one-menu
   width 100%
   height 100%
+  background-color #fff
 
   & >>> .veui-menu-tree-wrapper
     display flex
@@ -184,11 +208,47 @@ export default {
     flex-shrink 0
 
 .toggle
-  margin-right 16px
-  font-size 13px
-  vertical-align middle
+  display none
 
 .disabled
   opacity 0.3
   pointer-events none
+
+@media (max-width 480px)
+  .one-nav
+    z-index 20
+    transition transform 0.3s
+    transform translateX(-100%)
+
+    &.expanded
+      transform translateX(0)
+      box-shadow 0 0 12px rgba(0, 0, 0, 0.2)
+
+  header
+    position relative
+
+  .toggle
+    display flex
+    align-items center
+    justify-content center
+    width 36px
+    height 36px
+    position absolute
+    top 80px
+    left 100%
+    border 1px solid #e2e6f0
+    border-top-right-radius 4px
+    border-bottom-right-radius 4px
+    background-color #fff
+    box-shadow 0 0 12px rgba(0, 0, 0, 0.1)
+    font-size 20px
+
+    &::before
+      content ""
+      position absolute
+      top 0
+      bottom 0
+      left -19px
+      width 20px
+      background-color #fff
 </style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 276d955..921e28c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,11 @@
       'no-links': !hasFooterLinks
     }"
   >
-    <one-menu :nav="nav"/>
+    <one-menu
+      :nav="nav"
+      :expanded="expanded"
+      @toggle="handleToggle"
+    />
     <nuxt/>
     <one-footer
       class="footer"
@@ -42,7 +46,8 @@ export default {
       hasFooterLinks: true,
       config: {
         'link.routerLink': 'nuxt-link'
-      }
+      },
+      expanded: false
     }
   },
   computed: {
@@ -79,6 +84,9 @@ export default {
   methods: {
     updateLayout ({ hasLinks }) {
       this.hasFooterLinks = hasLinks
+    },
+    handleToggle (expanded) {
+      this.expanded = expanded
     }
   }
 }
@@ -95,6 +103,11 @@ main
   max-width 1346px - $sidebar-width
   min-width 560px
   transition margin-left 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86)
+
+@media (max-width 480px)
+  .content
+  .footer
+    min-width 0
 </style>
 
 <style lang="stylus" src="@/assets/styles/post.styl"></style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 2cdb2b6..205fde0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -24,6 +24,9 @@ module.exports = {
         hid: 'description',
         name: 'description',
         content: 'Website for VEUI: an enterprise component library for Vue.js.'
+      },
+      {
+        name: 'theme-color', content: '#0052cc'
       }
     ],
     link: [