From 11dbb601000ef9e662074ea2fee813452957b3b3 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sat, 27 Mar 2021 18:22:31 +0100
Subject: [PATCH] sidebar: highlight background on active and hover

---
 src/app/Nav.vue              | 78 +++++++++++++++++-------------------
 src/app/Sidebar.vue          | 19 ++++++++-
 src/playlist/PlaylistNav.vue | 14 +++----
 3 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/app/Nav.vue b/src/app/Nav.vue
index 62719c8..59e872b 100644
--- a/src/app/Nav.vue
+++ b/src/app/Nav.vue
@@ -1,56 +1,50 @@
 <template>
-  <div>
-    <nav class="nav flex-column">
-      <div class="nav-link logo d-flex justify-content-between">
-        <router-link :to="{name: 'home'}">
-          <Logo />
-        </router-link>
-        <button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
-          <Icon icon="x" />
-        </button>
-      </div>
+  <nav class="nav flex-column">
+    <div class="logo d-flex justify-content-between">
+      <Logo />
+      <button class="btn btn-link btn-lg p-0 d-md-none" @click="hideMenu">
+        <Icon icon="x" />
+      </button>
+    </div>
 
-      <router-link class="nav-link" :to="{name: 'home'}">
-        <Icon icon="card-text" class="" /> Discover
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'home'}" exact>
+      <Icon icon="card-text" class="" /> Discover
+    </router-link>
 
-      <router-link class="nav-link" :to="{name: 'queue'}">
-        <Icon icon="music-note-list" /> Playing
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'queue'}">
+      <Icon icon="music-note-list" /> Playing
+    </router-link>
 
-      <a class="nav-link disabled">
-        <small class="text-uppercase text-muted font-weight-bold">
-          Library
-        </small>
-      </a>
+    <small class="sidebar-heading text-muted">
+      Library
+    </small>
 
-      <router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
-        <Icon icon="collection" /> Albums
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'albums', params: {sort: 'recently-added'}}">
+      <Icon icon="collection" /> Albums
+    </router-link>
 
-      <router-link class="nav-link" :to="{name: 'artists'}">
-        <Icon icon="collection" /> Artists
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'artists'}">
+      <Icon icon="collection" /> Artists
+    </router-link>
 
-      <router-link class="nav-item nav-link" :to="{name: 'genres'}">
-        <Icon icon="collection" /> Genres
-      </router-link>
+    <router-link class="nav-item nav-link" :to="{name: 'genres'}">
+      <Icon icon="collection" /> Genres
+    </router-link>
 
-      <router-link class="nav-link" :to="{name: 'starred'}">
-        <Icon icon="star" /> Starred
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'starred'}">
+      <Icon icon="star" /> Starred
+    </router-link>
 
-      <router-link class="nav-link" :to="{name: 'podcasts'}">
-        <Icon icon="rss" /> Podcasts
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'podcasts'}">
+      <Icon icon="rss" /> Podcasts
+    </router-link>
 
-      <router-link class="nav-link" :to="{name: 'radio'}">
-        <Icon icon="broadcast" /> Radio
-      </router-link>
+    <router-link class="nav-link" :to="{name: 'radio'}">
+      <Icon icon="broadcast" /> Radio
+    </router-link>
 
-      <PlaylistNav />
-    </nav>
-  </div>
+    <PlaylistNav />
+  </nav>
 </template>
 <script lang="ts">
   import Vue from 'vue'
diff --git a/src/app/Sidebar.vue b/src/app/Sidebar.vue
index e81b5f4..765006e 100644
--- a/src/app/Sidebar.vue
+++ b/src/app/Sidebar.vue
@@ -33,6 +33,13 @@
     height: 1.5rem;
   }
 
+  .sidebar-container .sidebar-heading {
+    padding: 0.5rem 1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    display: block;
+  }
+
   .sidebar-container .nav-link {
     width: calc(100%);
     overflow: hidden;
@@ -44,9 +51,19 @@
     margin-right: 0.75rem;
   }
 
-  .sidebar-container a.nav-link:not(.active) .b-icon {
+  .sidebar-container .nav-link:not(.active) .b-icon {
     color: var(--text-muted);
   }
+  .sidebar-container .nav-link:hover {
+    color: inherit;
+    background-color: rgba(255, 255, 255, 0.045);
+  }
+  .sidebar-container .nav-link.router-link-active {
+    background-color: rgba(255, 255, 255, 0.045);
+  }
+  .sidebar-container .nav-link.router-link-active:hover {
+    color: var(--primary);
+  }
 </style>
 <script lang="ts">
   import Vue from 'vue'
diff --git a/src/playlist/PlaylistNav.vue b/src/playlist/PlaylistNav.vue
index 4e743bf..4e1038f 100644
--- a/src/playlist/PlaylistNav.vue
+++ b/src/playlist/PlaylistNav.vue
@@ -1,13 +1,11 @@
 <template>
   <div style="max-width: 100%">
-    <span class="nav-link">
-      <small class="text-uppercase text-muted font-weight-bold">
-        Playlists
-        <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
-          <Icon icon="plus" />
-        </button>
-      </small>
-    </span>
+    <small class="sidebar-heading text-muted">
+      Playlists
+      <button class="btn btn-link btn-sm p-0 float-right" @click="showModal = true">
+        <Icon icon="plus" />
+      </button>
+    </small>
 
     <router-link class="nav-link" :to="{name: 'playlist', params: { id: 'random' }}">
       <Icon icon="music-note-list" class="mr-2" /> Random