Merge pull request #61 from ProtocolONE/navbar_with_scrolls

Perfect scrollbars for PageNavbar

Author: sundagy

package.json

@@ -7,8 +7,10 @@
   "dependencies": {
     "date-fns": "^v2.0.0-alpha.27",
     "lodash-es": "^4.17.11",
+    "perfect-scrollbar": "^1.4.0",
     "vue": "^2.5.21",
     "vue-clickaway": "^2.2.2",
+    "vue-perfect-scrollbar": "^0.1.0",
     "vue-wysiwyg": "^1.7.2",
     "vuejs-datepicker": "^1.5.4"
   },

src/PageNavbar.vue

@@ -19,22 +19,27 @@
 
 <template>
 <div class="page-navbar">
-  <component
-    :is="logoLinkTagName"
-    class="logo"
-    :to="logoLink && isRouter(logoLink.router) ? url : null"
-    :href="logoLink ? url : null"
-  >
-    <span class="logo-icon">
-      <slot name="logo" />
-    </span>
-    <span class="logo-title">
-      {{ title }}
-      <slot name="title" />
-    </span>
-  </component>
-
-  <div class="navgition-links">
+
+  <div class="top">
+    <component
+      :is="logoLinkTagName"
+      class="logo"
+      :to="logoLink && isRouter(logoLink.router) ? url : null"
+      :href="logoLink ? url : null"
+    >
+      <span class="logo-icon">
+        <slot name="logo" />
+      </span>
+      <span class="logo-title">
+        {{ title }}
+        <slot name="title" />
+      </span>
+    </component>
+  </div>
+
+  <VuePerfectScrollbar
+    class="navgition-links"
+    :settings="{suppressScrollX: true}">
     <component
       v-for="(link, index) in navigationLinks"
       :is="isRouter(link.router) ? routerComponentName : 'a'"
@@ -46,7 +51,7 @@
       <span class="navgition-link-icon" />
       <span v-text="link.label" />
     </component>
-  </div>
+  </VuePerfectScrollbar>
 
   <div class="bottom">
     <slot name="bottom" />
@@ -103,11 +108,13 @@
 </template>
 
 <script>
+import VuePerfectScrollbar from 'vue-perfect-scrollbar';
 import IconAuth from './IconAuth.vue';
 
 export default {
   components: {
     IconAuth,
+    VuePerfectScrollbar,
   },
   props: {
     /**
@@ -182,6 +189,12 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.ps__scrollbar-y-rail {
+  background: none !important;
+}
+</style>
+
 <style scoped lang="scss">
 $navbar-color: #203d5f;
 $hover-navbar-item-color: #2f6ecd;
@@ -199,6 +212,9 @@ $hover-font-color: #fff;
   color: $font-color;
   z-index: 10;
 
+  display: flex;
+  flex-direction: column;
+
   &:before {
     content: '';
     position: fixed;
@@ -264,9 +280,8 @@ $hover-font-color: #fff;
 }
 
 .navgition-links {
-  width: 100%;
+  height: 100%;
   white-space: nowrap;
-  overflow: hidden;
 }
 .navgition-link {
   padding: 16px;
@@ -306,11 +321,8 @@ $hover-font-color: #fff;
 }
 
 .bottom {
-  position: absolute;
-  bottom: 0;
   width: 100%;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .user {

yarn.lock

@@ -5143,6 +5143,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+perfect-scrollbar@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz#5d014ef9775e1f43058a1dbae9ed1daf0e7091f1"
+  integrity sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -6958,6 +6963,11 @@ vue-loader@^15.4.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-perfect-scrollbar@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/vue-perfect-scrollbar/-/vue-perfect-scrollbar-0.1.0.tgz#be12c23d1753a013fa81ceb9872cb5fc0b1b4960"
+  integrity sha512-l/ZEidPDFplXeDtxs+gO3D8efhwqyIEcUtfvfRujCQemcn39ghpSNoizWWZYI6Ro0iz3yP+w7LqNxEBjE+T1qQ==
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"