update

src/assets/styles/md-style.scss

@@ -42,10 +42,6 @@
     margin-bottom: 56px;
   }
 
-  h2 {
-    margin: 45px 0 20px;
-    font-size: 24px;
-  }
 
   h3 {
     margin: 16px 0px;
@@ -95,7 +91,7 @@
     td {
       padding: 8px 20px;
       color: #fff;
-      
+
       &:first-child {
         border-left: 0px;
         code {

src/assets/styles/theme.scss

@@ -163,13 +163,16 @@ html.dark {
     color: #fff;
   }
 
-  .doc-nav a {
+  .doc-nav h2 {
     color: #fff;
   }
+
   .doc-nav a:hover {
     color: var(--brand-color);
+    opacity: 1;
   }
 
+
   .translations:before, .appearance:before, .social-links:before {
     background-color: rgba(60, 60, 67, 0.92);
   }
@@ -216,26 +219,4 @@ html.dark {
       background-color: #2c2c30;
     }
   }
-}
-
-
-
-
-
-// @media screen and (min-width: 860px) {
-//   .doc-nav {
-//     display: none;
-//   }
-//   .doc-content {
-//     margin-left: 0!important;
-//   }
-// }
-
-// @media screen and (max-width: 880px) {
-//   .doc-nav {
-//     display: block;
-//   }
-//   .doc-content {
-//     margin-left: 260px;
-//   }
-// }
+}

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header :class="{ sticky: isHomePage() }" class="header">
+  <header class="header">
     <div>
       <div class="container">
         <div class="left-bar">
@@ -61,6 +61,15 @@
                           ></path>
                         </svg>
                       </a>
+                      <p class="link menu-link" style="color: #aaa">
+                        Angular (Work in progress)
+                      </p>
+                      <p class="link menu-link" style="color: #aaa">
+                        Svelte (Work in progress)
+                      </p>
+                      <p class="link menu-link" style="color: #aaa">
+                        Javascript (Work in progress)
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -345,16 +354,6 @@ export default defineComponent({
       };
     });
 
-    const isHomePage = computed(() => {
-      return function () {
-        return !(
-          route.path.includes("component") ||
-          route.path.includes("guide") ||
-          route.path.includes("otherdocs")
-        );
-      };
-    });
-
     // lang switch
     const switchLang = () => {
       let href = "";
@@ -387,7 +386,6 @@ export default defineComponent({
       data,
       isActive,
       switchLang,
-      isHomePage,
       ecosystemLangs,
     };
   },
@@ -396,15 +394,12 @@ export default defineComponent({
 
 <style lang="scss">
 .header {
-  height: 72px;
+  // height: 72px;
   z-index: 30;
   top: 0px;
-  position: relative;
+  position: sticky;
   min-width: 860px;
-
-  &.sticky {
-    position: sticky;
-  }
+  width: 100%;
 
   > div {
     margin-left: auto;

src/components/Nav.vue

@@ -1,42 +1,35 @@
 <template>
   <div class="doc-nav" :class="{ 'fixed-class': fixed }">
-    <div
-      v-for="item in docs.packages"
-      :class="{ active: isActive(item.name) }"
-      :key="item"
-    >
-      <p>{{ isZhLang ? item.cName : item.name }}</p>
-      <router-link
-        :to="item.name.toLowerCase()"
-        v-for="subItem in item.children"
-        :key="subItem"
-      >
-        {{ item.name }}
-        {{ isZhLang ? subItem.cName : subItem.name }}
-      </router-link>
+    <div class="nav-wrap">
+      <section v-for="item in docs.packages" :key="item">
+        <h2>{{ isZhLang ? item.cName : item.name }}</h2>
+
+        <router-link
+          v-for="subItem in item.children"
+          :class="{ active: isActive(subItem.name) }"
+          :key="subItem"
+          :to="subItem.name.toLowerCase()"
+        >
+          {{ isZhLang ? subItem.cName : subItem.name }}
+        </router-link>
+      </section>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, computed, onMounted, toRefs } from "vue";
-import { useRoute, onBeforeRouteUpdate } from "vue-router";
-import { RefData } from "@/assets/util/ref";
-import { nav, docs } from "@/config";
+import { defineComponent, reactive, computed } from "vue";
+import { docs } from "@/config";
 
 export default defineComponent({
   name: "DocNav",
   props: {
     fixed: Boolean,
   },
   setup() {
-    const route = useRoute();
-
     const isActive = computed(() => {
       return function (name: string) {
-        const currentValue = RefData.getInstance().currentRoute.value;
-        const value = currentValue;
-        return value == name.toLowerCase();
+        return location.hash.split("/").pop() === name;
       };
     });
 
@@ -51,71 +44,32 @@ export default defineComponent({
 
 <style lang="scss">
 .doc-nav {
-  bottom: 0px;
-  left: 0px;
-  z-index: 10;
-  width: 260px;
-  position: fixed;
-  top: 75px;
   overflow: auto;
   transition: all 150ms;
+  padding: 32px 32px 0;
 
-  &.fixed-class {
-    top: 0;
+  h2 {
+    color: #213547;
+    line-height: 20px;
+    font-size: 13px;
+    font-weight: 600;
   }
-  ol {
-    margin-bottom: 20px;
-    // padding-left: 32px;
-
-    li {
-      font-size: 14px;
-      font-weight: bold;
-      position: relative;
-
-      &.active {
-        &::before {
-          position: absolute;
-          content: "";
-          left: 0;
-          top: 50%;
-          width: 22px;
-          margin-top: -5px;
-          height: 10px;
-          transform: rotate(90deg);
-        }
-      }
-    }
-
-    > ul {
-      // padding-left: 26px;
 
-      li {
-        /* padding-left: 29px; */
-        cursor: pointer;
-
-        &:hover {
-          a {
-            color: #646cff;
-          }
-        }
-
-        a {
-          height: 48px;
-          line-height: 48px;
-          display: flex;
+  a {
+    display: flex;
+    font-size: 15px;
+    line-height: 32px;
+  }
 
-          &.router-link-active,
-          &.active {
-            color: #646cff;
-          }
+  .router-link-active {
+    color: #646cff;
+  }
 
-          b {
-            font-weight: normal;
-            font-size: 12px;
-          }
-        }
-      }
-    }
+  section {
+    margin-bottom: 26px;
   }
 }
+.nav-wrap {
+  position: fixed;
+}
 </style>

src/config/baseConfig.ts

@@ -51,8 +51,13 @@ export default {
             show: true,
           },
           {
-            name: "event",
-            cName: "事件 event",
+            name: "lifecycle",
+            cName: "生命周期 lifecycle",
+            show: true,
+          },
+          {
+            name: "events",
+            cName: "事件 events",
             show: true,
           },
           {
@@ -68,29 +73,30 @@ export default {
         children: [
           {
             name: "requirements",
-            cname: "要求 requirements",
+            cName: "要求 requirements",
+            show: true,
           },
           {
             name: "development",
-            cname: "开发 development",
+            cName: "开发 development",
           },
           {
             name: "testing",
-            cname: "测试 testing",
+            cName: "测试 testing",
           },
           {
             name: "publishing",
-            cname: "发布 publishing",
+            cName: "发布 publishing",
           },
         ],
       },
       {
         name: "Other",
-        cname: "其它",
+        cName: "其它",
         children: [
           {
             name: "changelog",
-            cname: "更新日志 changelog",
+            cName: "更新日志 changelog",
           },
         ],
       },