Merge branch 'feature/nav-panel-hover-state' into 'develop'

themeable hover states for nav-panel

See merge request !53

1 files changed, 23 insertions, 10 deletions

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 85ed163c..1d96f4d6 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="nav-panel">
-    <div class="panel panel-default base01-background">
+    <div class="panel panel-default base02-background">
       <ul>
         <li v-if='currentUser'>
-          <router-link to='/main/friends'>
+          <router-link class="base01-background" to='/main/friends'>
             Timeline
           </router-link>
         </li>
         <li v-if='currentUser'>
-          <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
+          <router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
             Mentions
           </router-link>
         </li>
         <li>
-          <router-link to='/main/public'>
+          <router-link class="base01-background" to='/main/public'>
             Public Timeline
           </router-link>
         </li>
         <li>
-          <router-link to='/main/all'>
+          <router-link class="base01-background" to='/main/all'>
             The Whole Known Network
           </router-link>
         </li>
@@ -30,7 +30,6 @@
 <script src="./nav_panel.js" ></script>
 
 <style lang="scss">
-
  .nav-panel ul {
      list-style: none;
      margin: 0;
@@ -39,7 +38,15 @@
 
  .nav-panel li {
      border-bottom: 1px solid;
-     padding: 0.8em 0.85em;
+     padding: 0;
+     &:first-child a {
+       border-top-right-radius: 10px;
+       border-top-left-radius: 10px;
+     }
+     &:last-child a {
+       border-bottom-right-radius: 10px;
+       border-bottom-left-radius: 10px;
+     }
  }
 
  .nav-panel li:last-child {
@@ -48,10 +55,16 @@
 
  .nav-panel a {
      display: block;
-     width: 100%;
-
+     padding: 0.8em 0.85em;
+     &:hover {
+       background-color: transparent;
+     }
      &.router-link-active {
-         font-weight: bold
+       font-weight: bolder;
+       background-color: transparent;
+       &:hover {
+         text-decoration: underline;
+       }
      }
  }