From 4840a66f38d03eedd2e4df979677363c450605d5 Mon Sep 17 00:00:00 2001 From: Nikan Dalvand Date: Mon, 22 Jul 2019 13:15:35 +0430 Subject: [PATCH 1/2] Made sidebar show on state change added Menu and added overlay and fixed some other minor issues --- src/renderer/components/Button.vue | 1 - src/renderer/layouts/DockableSidebar.vue | 64 ++++++++++++++++++++++-- 2 files changed, 61 insertions(+), 4 deletions(-) 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..d7346e2 100644 --- a/src/renderer/layouts/DockableSidebar.vue +++ b/src/renderer/layouts/DockableSidebar.vue @@ -16,8 +16,24 @@ +
-
-
-
-
- - - - - - - - +
+ +
+
+ + + + + + + + +
+
-
- - - - - 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%)