test

src/assets/styles/sidebar.scss

@@ -11,7 +11,7 @@
     transition: width 0.28s;
     width: $sideBarWidth !important;
     background-color: $menuBg;
-    height: 100%;
+    height: 70%;
     position: fixed;
     font-size: 0;
     top: 0;
@@ -90,6 +90,9 @@
     .sidebar-container {
       width: 54px !important;
     }
+    .sidebar-container-ad {
+      width: 54px !important;
+    }
 
     .main-container {
       margin-left: 54px;
@@ -154,21 +157,33 @@
       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;
+    }
   }
 }
 
@@ -207,3 +222,16 @@
     }
   }
 }
+
+.sidebar-container-ad {
+  transition: width 0.28s;
+  width: $sideBarWidth !important;
+  background-color: $menuBg;
+  height: 30%;
+  position: fixed;
+  font-size: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  overflow: hidden;
+}

src/components/Ad/index.vue

@@ -4,7 +4,7 @@
     id="ww-container"
     class="wwads-cn wwads-vertical"
     data-id="148"
-    style="z-index:10000;position:fixed;bottom:33px;right:1px;max-width:200px;padding: 12px 10px;border-radius:5px;"
+    style="z-index:10000;padding: 12px 10px;"
   />
 </template>
 
@@ -22,9 +22,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-  .wwads-vertical .wwads-poweredby {
-    display: none !important;
-  }
-</style>

src/layout/components/AppMain.vue

@@ -23,22 +23,6 @@ export default {
     key() {
       return this.$route.path
     }
-    // watch: {
-    //   '$route.path': {
-    //     handler: function() {
-    //       // define ads element
-    //       const ads = document.getElementById('ww-container')
-    //       // ad parent node
-    //       const prn = ads.parentNode
-    //       // lets clone ads block
-    //       const cln = ads.cloneNode(true)
-    //       // remove the current ads block completely
-    //       prn.removeChild(ads)
-    //       // append a newly cloned one
-    //       prn.appendChild(cln)
-    //     }
-    //   }
-    // }
   }
 }
 </script>

src/layout/index.vue

@@ -2,6 +2,9 @@
   <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 />
@@ -19,6 +22,7 @@
 
 <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'
@@ -33,7 +37,8 @@ export default {
     Settings,
     Sidebar,
     TagsView,
-    Theme
+    Theme,
+    Ad
   },
   mixins: [ResizeMixin],
   computed: {