From d08118bfad4041180b5eae1994c9bffcc5265e01 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Tue, 18 Aug 2020 18:09:44 +0200
Subject: [PATCH] improve sidebar style

---
 src/app/Nav.vue                | 31 ++++++++++---------------------
 src/app/Sidebar.vue            | 30 ++++++++++++++++++++++++++----
 src/playlist/PlaylistNav.vue   |  8 ++++----
 src/shared/components/Icon.vue |  2 ++
 src/style/main.scss            |  4 ++++
 5 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/app/Nav.vue b/src/app/Nav.vue
index b3d8bc7..73697eb 100644
--- a/src/app/Nav.vue
+++ b/src/app/Nav.vue
@@ -1,20 +1,16 @@
 <template>
-  <div class="text-truncate">
+  <div>
     <nav class="nav flex-column">
       <router-link class="nav-link logo" :to="{name: 'home'}">
         <Logo />
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'home'}">
-        <Icon icon="card-text" class="mr-2" /> Home
+        <Icon icon="card-text" class="" /> Home
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'queue'}">
-        <Icon icon="music-note-list" class="mr-2" /> Playing
-      </router-link>
-
-      <router-link class="nav-link" :to="{name: 'starred'}">
-        <Icon icon="star-fill" class="mr-2" /> Starred
+        <Icon icon="music-note-list" /> Playing
       </router-link>
 
       <a class="nav-link disabled">
@@ -24,32 +20,25 @@
       </a>
 
       <router-link class="nav-link" :to="{name: 'albums'}">
-        <Icon icon="collection-fill" class="mr-2" /> Albums
+        <Icon icon="collection" /> Albums
       </router-link>
 
       <router-link class="nav-link" :to="{name: 'artists'}">
-        <Icon icon="collection-fill" class="mr-2" /> Artists
+        <Icon icon="collection" /> Artists
       </router-link>
 
       <router-link class="nav-item nav-link" :to="{name: 'genres'}">
-        <Icon icon="collection-fill" class="mr-2" /> Genres
+        <Icon icon="collection" /> Genres
+      </router-link>
+
+      <router-link class="nav-link" :to="{name: 'starred'}">
+        <Icon icon="star" /> Starred
       </router-link>
 
       <PlaylistNav />
     </nav>
   </div>
 </template>
-<style lang="scss" scoped>
-  .logo {
-    height: 48px;
-  }
-  .nav-link {
-    width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-</style>
 <script lang="ts">
   import Vue from 'vue'
   import Logo from './Logo.vue'
diff --git a/src/app/Sidebar.vue b/src/app/Sidebar.vue
index 0ccdfce..4496011 100644
--- a/src/app/Sidebar.vue
+++ b/src/app/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="sidebar elevated">
-    <div class="d-none d-md-block">
+  <div class="sidebar-container elevated">
+    <div class="sidebar-fixed d-none d-md-block">
       <Nav />
     </div>
     <b-sidebar
@@ -18,9 +18,31 @@
     </b-sidebar>
   </div>
 </template>
-<style lang="scss" scoped>
-  .sidebar {
+<style>
+  .sidebar-container .sidebar-fixed {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     padding-bottom: 180px;
+    width: 250px;
+  }
+
+  .sidebar-container .logo {
+    height: 48px;
+  }
+
+  .sidebar-container .nav-link {
+    width: calc(100%);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sidebar-container a.nav-link .b-icon {
+    margin-right: 0.75rem;
+  }
+
+  .sidebar-container a.nav-link:not(.active) .b-icon {
+    color: var(--text-muted);
   }
 </style>
 <script lang="ts">
diff --git a/src/playlist/PlaylistNav.vue b/src/playlist/PlaylistNav.vue
index 639e205..4e743bf 100644
--- a/src/playlist/PlaylistNav.vue
+++ b/src/playlist/PlaylistNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="max-width: 100%">
     <span class="nav-link">
       <small class="text-uppercase text-muted font-weight-bold">
         Playlists
@@ -9,19 +9,19 @@
       </small>
     </span>
 
-    <router-link class="nav-item nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
+    <router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
       <Icon icon="music-note-list" class="mr-2" /> Random
     </router-link>
 
     <router-link v-for="item in playlists" :key="item.id"
                  :to="{name: 'playlist', params: { id: item.id }}"
-                 class="nav-item nav-link">
+                 class="nav-link">
       <span @dragover="onDragover" @drop="onDrop(item.id, $event)">
         <Icon icon="music-note-list" class="mr-2" /> {{ item.name }}
       </span>
     </router-link>
 
-    <router-link class="nav-item nav-link" :to="{name: 'playlists'}">
+    <router-link class="nav-link" :to="{name: 'playlists'}">
       More...
     </router-link>
 
diff --git a/src/shared/components/Icon.vue b/src/shared/components/Icon.vue
index ebf4c7f..dba2fda 100644
--- a/src/shared/components/Icon.vue
+++ b/src/shared/components/Icon.vue
@@ -9,6 +9,7 @@
     BIconMusicNoteList,
     BIconStar,
     BIconStarFill,
+    BIconCollection,
     BIconCollectionFill,
     BIconList,
     BIconPlayFill,
@@ -29,6 +30,7 @@
       BIconMusicNoteList,
       BIconStar,
       BIconStarFill,
+      BIconCollection,
       BIconCollectionFill,
       BIconList,
       BIconPlayFill,
diff --git a/src/style/main.scss b/src/style/main.scss
index dca1b55..839f85a 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -37,6 +37,10 @@ $input-color: $theme-text;
 
 $progress-bg: rgb(35, 35, 35);
 
+:root {
+  --text-muted: #{$theme-text-muted};
+}
+
 .elevated {
   background-color: $theme-elevation-1;
 }