diff --git a/package-lock.json b/package-lock.json index 1d90f8e..384e5d9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 7a5ebc5..9b6dda7 100644 --- a/package.json +++ b/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", diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue index d7346e2..c596c26 100644 --- a/src/renderer/layouts/DockableSidebar.vue +++ b/src/renderer/layouts/DockableSidebar.vue @@ -17,117 +17,119 @@
-
-
-
- - - - - - - - +
+ +
+
+ + + + + + + + +
+
-
- - - - - Artists - - - - Songs - - - - Albums - - - - Genres - - - - My Favorites - - - - - - Hits of this summer - - - Classical Music - - - Chillout - - - Workout - - + + + + + Artists + + + + Songs + + + + Albums + + + + Genres + + + + My Favorites + + + + + + Hits of this summer + + + Classical Music + + + Chillout + + + Workout + + - -
- - - + +
+ + + + + Settings + + + + Version {{version}} + + +
@@ -139,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']) @@ -198,12 +201,12 @@ section.sidebar 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 @@ -211,9 +214,9 @@ section.sidebar display: none &.open transform: translateX(0%) - padding: 1rem 1rem 0rem 1rem + padding: 1rem 0rem 0rem 1rem width: 300px - overflow-y: auto + overflow-y: hidden .playlist-button align-self: flex-start @@ -228,7 +231,7 @@ 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%)