From 9b74a3dd03541e8aca369f5dd57be4305b26a326 Mon Sep 17 00:00:00 2001
From: Enoch Qin <qyqdream@gmail.com>
Date: Fri, 4 Jun 2021 13:54:37 +0800
Subject: [PATCH] docs: side-nav refactor with Vue3 (#1943)

* docs: side-nav refactor with Vue3

* docs: fix side-nav style
---
 website/components/side-nav.vue | 374 +++++++++++++++++---------------
 1 file changed, 202 insertions(+), 172 deletions(-)

diff --git a/website/components/side-nav.vue b/website/components/side-nav.vue
index 633f53c126..9751c91503 100644
--- a/website/components/side-nav.vue
+++ b/website/components/side-nav.vue
@@ -10,19 +10,23 @@
         <a>{{ lang === 'zh-CN' ? '赞助商' : 'Sponsors' }}</a>
         <ul class="pure-menu-list sub-nav">
           <li class="nav-item">
-            <a class="sponsor" href="https://bit.dev/?from=element-ui" target="_blank">
+            <a
+              class="sponsor"
+              href="https://bit.dev/?from=element-ui"
+              target="_blank"
+            >
               <img src="~examples/assets/images/bit.svg" alt="bit">
             </a>
           </li>
         </ul>
       </li>
-      <li
-        v-for="(item, keyy) in data"
-        :key="keyy"
-        class="nav-item"
-      >
-        <a v-if="!item.path && !item.href" @click="expandMenu">{{ item.name }}</a>
-        <a v-if="item.href" :href="item.href" target="_blank">{{ item.name }}</a>
+      <li v-for="(item, keyy) in data" :key="keyy" class="nav-item">
+        <a v-if="!item.path && !item.href" @click="expandMenu">{{
+          item.name
+        }}</a>
+        <a v-if="item.href" :href="item.href" target="_blank">{{
+          item.name
+        }}</a>
         <router-link
           v-if="item.path"
           active-class="active"
@@ -46,12 +50,10 @@
           </li>
         </ul>
         <template v-if="item.groups">
-          <div
-            v-for="(group, key) in item.groups"
-            :key="key"
-            class="nav-group"
-          >
-            <div class="nav-group__title" @click="expandMenu">{{ group.groupName }}</div>
+          <div v-for="(group, key) in item.groups" :key="key" class="nav-group">
+            <div class="nav-group__title" @click="expandMenu">
+              {{ group.groupName }}
+            </div>
             <ul class="pure-menu-list">
               <li
                 v-for="(navItem, keey) in group.list"
@@ -74,219 +76,247 @@
     <!--<div id="code-sponsor-widget"></div>-->
   </div>
 </template>
-<script>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import { useRoute } from 'vue-router'
 import bus from '../bus'
 import compoLang from '../i18n/component.json'
 
-export default {
+export default defineComponent({
   props: {
     data: {
       type: Array,
-      default: () => ([]),
+      default: () => [],
     },
     base: {
       type: String,
       default: '',
     },
   },
-  data() {
-    return {
-      highlights: [],
-      navState: [],
-      isSmallScreen: false,
-      isFade: false,
-    }
-  },
-  computed: {
-    navStyle() {
+  setup() {
+    const isSmallScreen = ref(false)
+    const isFade = ref(false)
+    const route = useRoute()
+
+    bus.$on('fade-nav', () => {
+      isFade.value = true
+    })
+
+    onMounted(() => {
+      handleResize()
+      window.addEventListener('resize', handleResize)
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize)
+    })
+
+    const navStyle = computed(() => {
       const style = {}
-      if (this.isSmallScreen) {
+      if (isSmallScreen.value) {
         style.paddingBottom = '60px'
       }
-      style.opacity = this.isFade ? '0.5' : '1'
+      style.opacity = isFade.value ? '0.5' : '1'
       return style
-    },
-    lang() {
-      return this.$route.meta.lang
-    },
-    langConfig() {
-      return compoLang.filter(config => config.lang === this.lang)[0]['nav']
-    },
-  },
-  watch: {
-    '$route.path'() {
-      this.handlePathChange()
-    },
-    isFade(val) {
-      bus.$emit('nav-fade', val)
-    },
-  },
-  created() {
-    bus.$on('fade-nav', () => {
-      this.isFade = true
     })
-  },
-  mounted() {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize)
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    handleResize() {
-      this.isSmallScreen = document.documentElement.clientWidth < 768
-      this.handlePathChange()
-    },
-    handlePathChange() {
-      if (!this.isSmallScreen) {
-        this.expandAllMenu()
+
+    const lang = computed(() => {
+      return route.meta.lang
+    })
+
+    const langConfig = computed(() => {
+      return compoLang.filter(config => config.lang === lang.value)[0]['nav']
+    })
+
+    watch(
+      () => route.path,
+      () => {
+        handlePathChange()
+      },
+    )
+
+    watch(isFade, val => {
+      bus.$emit('nav-fade', val)
+    })
+
+    const handleResize = () => {
+      isSmallScreen.value = document.documentElement.clientWidth < 768
+      handlePathChange()
+    }
+
+    const handlePathChange = async () => {
+      if (!isSmallScreen.value) {
+        expandAllMenu()
         return
       }
-      this.$nextTick(() => {
-        this.hideAllMenu()
-        let activeAnchor = this.$el.querySelector('a.active')
-        let ul = activeAnchor.parentNode
-        while (ul.tagName !== 'UL') {
-          ul = ul.parentNode
-        }
-        ul.style.height = 'auto'
-      })
-    },
-    hideAllMenu() {
-      [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+      await nextTick()
+      hideAllMenu()
+      let activeAnchor = document.querySelector('a.active')
+      let ul = activeAnchor.parentNode
+      while (ul.tagName !== 'UL') {
+        ul = ul.parentNode
+      }
+      ul.style.height = 'auto'
+    }
+
+    const hideAllMenu = () => {
+      [].forEach.call(document.querySelectorAll('.pure-menu-list'), ul => {
         ul.style.height = '0'
       })
-    },
-    expandAllMenu() {
-      [].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
+    }
+
+    const expandAllMenu = () => {
+      [].forEach.call(document.querySelectorAll('.pure-menu-list'), ul => {
         ul.style.height = 'auto'
       })
-    },
-    expandMenu(event) {
-      if (!this.isSmallScreen) return
+    }
+
+    const expandMenu = event => {
+      if (!isSmallScreen.value) return
       let target = event.currentTarget
-      if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return
-      this.hideAllMenu()
+      if (
+        !target.nextElementSibling ||
+        target.nextElementSibling.tagName !== 'UL'
+      )
+        return
+      hideAllMenu()
       event.currentTarget.nextElementSibling.style.height = 'auto'
-    },
+    }
+
+    return {
+      isFade,
+      navStyle,
+      lang,
+      langConfig,
+      expandMenu,
+    }
   },
-}
+})
 </script>
 <style lang="scss" scoped>
-  .side-nav {
-    width: 100%;
-    box-sizing: border-box;
-    padding-right: 30px;
-    transition: opacity .3s;
-    &.is-fade {
-      transition: opacity 3s;
-    }
+.side-nav {
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 30px;
+  transition: opacity 0.3s;
+  &.is-fade {
+    transition: opacity 3s;
+  }
 
-    li {
-      list-style: none;
-    }
+  li {
+    list-style: none;
+  }
 
-    ul {
-      padding: 0;
+  ul {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  > ul > .nav-item > a {
+    margin-top: 15px;
+  }
+
+  > ul > .nav-item:nth-child(-n + 4) > a {
+    margin-top: 0;
+  }
+
+  .nav-item {
+    a {
+      font-size: 16px;
+      color: #333;
+      line-height: 40px;
+      height: 40px;
       margin: 0;
+      padding: 0;
+      text-decoration: none;
+      display: block;
+      position: relative;
+      transition: 0.15s ease-out;
+      font-weight: bold;
       overflow: hidden;
-    }
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-weight: normal;
 
-    > ul > .nav-item > a {
-      margin-top: 15px;
-    }
-
-    > ul > .nav-item:nth-child(-n + 4) > a {
-      margin-top: 0;
+      &.active {
+        color: #409eff;
+      }
     }
 
     .nav-item {
       a {
-        font-size: 16px;
-        color: #333;
-        line-height: 40px;
-        height: 40px;
-        margin: 0;
-        padding: 0;
-        text-decoration: none;
         display: block;
-        position: relative;
-        transition: .15s ease-out;
-        font-weight: bold;
+        height: 40px;
+        color: #444;
+        line-height: 40px;
+        font-size: 14px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-weight: normal;
 
+        &:hover,
         &.active {
-          color: #409EFF;
+          color: #409eff;
         }
       }
+    }
+
+    &.sponsors {
+      & > .sub-nav {
+        margin-top: -10px;
+      }
+
+      & > a {
+        color: #777;
+        font-weight: 300;
+        font-size: 14px;
+      }
 
       .nav-item {
+        display: inline-block;
+
         a {
-          display: block;
-          height: 40px;
-          color: #444;
-          line-height: 40px;
-          font-size: 14px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          font-weight: normal;
-
-          &:hover,
-          &.active {
-            color: #409EFF;
-          }
-        }
-      }
-
-      &.sponsors {
-        & > .sub-nav {
-          margin-top: -10px;
-        }
-
-        & > a {
-          color: #777;
-          font-weight: 300;
-          font-size: 14px;
-        }
-
-        .nav-item {
+          height: auto;
           display: inline-block;
+          vertical-align: middle;
+          margin: 8px 20px 4px 0;
 
-          a {
-            height: auto;
-            display: inline-block;
-            vertical-align: middle;
-            margin: 8px 20px 4px 0;
-
-            img {
-              width: 36px;
-            }
+          img {
+            width: 36px;
           }
         }
       }
     }
-
-    .nav-group__title {
-      font-size: 12px;
-      color: #999;
-      line-height: 26px;
-      margin-top: 15px;
-    }
-
-    #code-sponsor-widget {
-      margin: 0 0 0 -20px;
-    }
   }
-  .nav-dropdown-list {
-    width: 120px;
-    margin-top: -8px;
-    li {
-      font-size: 14px;
-    }
+
+  .nav-group__title {
+    font-size: 12px;
+    color: #999;
+    line-height: 26px;
+    margin-top: 15px;
   }
+
+  #code-sponsor-widget {
+    margin: 0 0 0 -20px;
+  }
+}
+
+.nav-dropdown-list {
+  width: 120px;
+  margin-top: -8px;
+
+  li {
+    font-size: 14px;
+  }
+}
 </style>