buttons look great now, including unstyled ones menu items work too

2 files changed, 9 insertions, 10 deletions

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 59722f6c..ed805944 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -70,17 +70,22 @@
   align-items: baseline;
   height: 3.5em;
   line-height: 3.5em;
-  padding: 0 1em;
+  padding: 0;
   width: 100%;
   color: $fallback--link;
   color: var(--link, $fallback--link);
 
+  &[aria-expanded] {
+    padding-right: 1em;
+  }
+
   .timelines-chevron {
     margin-right: 0;
   }
 
   .main-link {
     flex: 1;
+    padding: 0 1em;
   }
 
   .menu-icon {
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95..fbb550f0 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      activeClass="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -60,15 +61,8 @@
       margin: 0;
     }
 
-    &.router-link-active {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+    &.toggled {
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }