improve sidebar style

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
+        <Icon icon="music-note-list" /> Playing
-      </router-link>
-
-      <router-link class="nav-link" :to="{name: 'starred'}">
-        <Icon icon="star-fill" class="mr-2" /> Starred
       </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'

src/app/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="sidebar elevated">
+  <div class="sidebar-container elevated">
-    <div class="d-none d-md-block">
+    <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>
+<style>
-  .sidebar {
+  .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">

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>
 

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,

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;
 }