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/components/Button.vue b/src/renderer/components/Button.vue index 2631198..1ff917c 100644 --- a/src/renderer/components/Button.vue +++ b/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 diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue index b1c5a75..c596c26 100644 --- a/src/renderer/layouts/DockableSidebar.vue +++ b/src/renderer/layouts/DockableSidebar.vue @@ -16,102 +16,120 @@ -
-
@@ -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%)