update

src/assets/styles/sidebar.scss

@@ -11,7 +11,7 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
-    height: 66.4%;
+    height: 100%;
     position: fixed;
     font-size: 0;
     top: 0;
@@ -90,12 +90,7 @@
     .sidebar-container {
       width: 54px !important;
     }
-    .sidebar-container-ad {
-      width: 54px !important;
-    }
-    #ww-container{
-      display: none;
-    }
+
     .main-container {
       margin-left: 54px;
     }
@@ -159,33 +154,21 @@
       width: $sideBarWidth !important;
     }
 
-    .sidebar-container-ad {
-      transition: transform .28s;
-      width: $sideBarWidth !important;
-    }
-
     &.hideSidebar {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
         transform: translate3d(-$sideBarWidth, 0, 0);
       }
-      .sidebar-container-ad {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
-      }
     }
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
     }
-    .sidebar-container-ad {
-      transition: none;
-    }
   }
 }
 
@@ -229,11 +212,76 @@
   transition: width 0.28s;
   width: $sideBarWidth !important;
   background-color: $menuBg;
-  height: 33.6%;
+  height: 30%;
   position: fixed;
   font-size: 0;
   bottom: 0;
   left: 0;
-  z-index: 999;
+  z-index: 1001;
   overflow: hidden;
+
+  // reset element-ui css
+  .horizontal-collapse-transition {
+    transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+  }
+
+  .scrollbar-wrapper {
+    overflow-x: hidden !important;
+  }
+
+  .el-scrollbar__bar.is-vertical {
+    right: 0;
+  }
+
+  .el-scrollbar {
+    height: 100%;
+  }
+
+  &.has-logo {
+    .el-scrollbar {
+      height: calc(100% - 50px);
+    }
+  }
+
+  .is-horizontal {
+    display: none;
+  }
+
+  a {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .svg-icon {
+    margin-right: 16px;
+  }
+
+  .el-menu {
+    border: none;
+    height: 100%;
+    width: 100% !important;
+  }
+
+  // menu hover
+  .submenu-title-noDropdown,
+  .el-submenu__title {
+    &:hover {
+      background-color: $menuHover !important;
+    }
+  }
+
+  .is-active>.el-submenu__title {
+    color: $subMenuActiveText !important;
+  }
+
+  & .nest-menu .el-submenu>.el-submenu__title,
+  & .el-submenu .el-menu-item {
+    min-width: $sideBarWidth !important;
+    background-color: $subMenuBg !important;
+
+    &:hover {
+      background-color: $subMenuHover !important;
+    }
+  }
 }

src/components/Ad/index.vue

@@ -1,24 +0,0 @@
-<template>
-  <div
-    v-if="show"
-    id="ww-container"
-    class="wwads-cn wwads-vertical"
-    data-id="148"
-    style="z-index:10000;padding: 12px 10px;"
-  />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      show: true
-    }
-  },
-  created() {
-    if (window._AdBlockInit === undefined) {
-      this.show = false
-    }
-  }
-}
-</script>

src/layout/index.vue

@@ -2,9 +2,6 @@
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar class="sidebar-container" />
-    <div class="sidebar-container-ad">
-      <Ad />
-    </div>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
@@ -22,7 +19,6 @@
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import Ad from '@/components/Ad'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
@@ -37,8 +33,7 @@ export default {
     Settings,
     Sidebar,
     TagsView,
-    Theme,
-    Ad
+    Theme
   },
   mixins: [ResizeMixin],
   computed: {