Merge pull request #12 from nikandlv/development

Finished sidebar and added a better scrollbar

package-lock.json

@@ -12370,6 +12370,11 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "perfect-scrollbar": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
+      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -16662,6 +16667,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
+    "vue-custom-scrollbar": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-custom-scrollbar/-/vue-custom-scrollbar-1.1.0.tgz",
+      "integrity": "sha512-ZXf4Kjg7NZxVF6vo3OyXdueRkwHPp1qal+W08Ea6dJQcmm6FaCjJBrc6ukYbTEHMZHc2v8QNBpJg7pi4AYLhTA==",
+      "requires": {
+        "perfect-scrollbar": "^1.4.0",
+        "vue": "^2.5.17"
+      }
+    },
     "vue-electron": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/vue-electron/-/vue-electron-1.0.6.tgz",

package.json

@@ -59,6 +59,7 @@
     "axios": "^0.18.0",
     "normalize-scss": "^7.0.1",
     "vue": "^2.5.16",
+    "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",

src/renderer/components/Button.vue

@@ -27,7 +27,6 @@ export default {
   border-radius: .375rem
   transition: background-color 200ms
   box-sizing: border-box
-  overflow: hidden
   outline: unset
   &--contained 
     background-color: #336cfb

src/renderer/layouts/DockableSidebar.vue

@@ -16,8 +16,25 @@
             </div>
             <Logo :nopadding="true"/>
         </section>
-        <section class="sidebar" :class="{'open': menuStatus === true}">
+        <section class="overlay" :class="{'open': menuStatus === true}"  @click="toggleMenuStatus" />
+        <section >
+            <vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}"  :settings="settings">
+                <div class="logo-wrapper">
+                    <div @click="toggleMenuStatus" class="icon">
+                        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
+                            <g>
+                            <g id="Menu_1_">
+                                <path d="M12.03,120.303h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
+                                    c-6.641,0-12.03,5.39-12.03,12.03C0,114.913,5.39,120.303,12.03,120.303z"/>
+                                <path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
+                                    S379.58,180.455,372.939,180.455z"/>
+                                <path d="M372.939,264.667H132.333c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h240.606
+                                    c6.641,0,12.03-5.39,12.03-12.03C384.97,270.056,379.58,264.667,372.939,264.667z"/>	
+                            </g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g>
+                        </svg>
+                    </div>
                     <Logo class="logo" />
+                </div>
                 <MenuGroup>
                     <template v-slot:title>Menu</template>
                     <MenuItem to="/artists">
@@ -112,6 +129,7 @@
                         Version {{version}}
                     </MenuItem>
                 </MenuGroup>
+            </vue-custom-scrollbar>
         </section>        
     </div>
 </template>
@@ -123,12 +141,13 @@ import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
 import Button from '../components/Button'
+import vueCustomScrollbar from 'vue-custom-scrollbar'
 
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo, Button },
+  components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
   data: () => {
-    return { version: projectPackage.version }
+    return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
   },
   methods: {
     ...mapActions(['toggleMenuStatus'])
@@ -164,18 +183,41 @@ section.handle
         svg
             width: 24px
             height: 24px
+section.overlay
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    background-color: rgba(0,0,0,0)
+    z-index: 1100
+    transition: background-color 200ms
+    pointer-events: none
+    &.open
+        pointer-events: all
+        background-color: rgba(0,0,0,0.1)
 section.sidebar
     width: 250px
     max-width: 250px
     min-height: 100vh
     max-height: 100vh
-    padding: 2rem 2rem 0rem 2rem
+    padding: 2rem 0rem 0rem 2rem
     box-sizing: border-box
     background-color: #fcfcfc
     display: flex
     flex-direction: column
-    overflow-y: auto
+    overflow-y: hidden
     transition: width 300ms,transform 300ms,padding 500ms
+    .logo-wrapper
+        min-height: 48px
+        .icon
+            display: none
+    &.open
+        transform: translateX(0%)
+        padding: 1rem 0rem 0rem 1rem
+        width: 300px
+        overflow-y: hidden
+        
     .playlist-button
         align-self: flex-start
     .icon
@@ -189,13 +231,32 @@ section.sidebar
     section.sidebar
         width: 200px
         overflow-y: auto
-        padding: 1rem 1rem 0rem 1rem
+        padding: 1rem 0rem 0rem 1rem
 @media(max-width: 800px)
     section.sidebar
         transform: translateX(-100%)
-        width: 0
         overflow-y: hidden
-        padding: 2rem 0rem 0rem 0rem
+        z-index: 1200
+        position: absolute
+        left: 0
+        top: 0
+        .logo-wrapper
+            display: flex
+            .icon
+                display: block
+                width: 24px
+                height: 24px
+                padding: 0.8rem
+                cursor: pointer
+                transition: background-color 200ms
+                border-radius: 100%
+                &:hover
+                    background-color: rgba(black,0.05)
+                svg
+                    width: 24px
+                    height: 24px
+        .logo
+            display: none
     section.handle
         transform: translateY(0%)
 </style>