From fa41f6cf969456316b5265df0bb550770624d7ba Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Aug 2022 00:50:38 +0300
Subject: add an underline to the selected pin to improve accesibility

---
 src/components/nav_panel/nav_panel.vue        | 9 +++++++--
 src/components/navigation/navigation_pins.vue | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 67b124dc..11260818 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -3,7 +3,7 @@
     <div class="panel panel-default">
       <div
         v-if="!forceExpand"
-        class="panel-heading"
+        class="panel-heading nav-panel-heading"
       >
         <NavigationPins :limit="6" />
         <div class="spacer" />
@@ -192,6 +192,7 @@
 
   .timelines-chevron {
     margin-left: 0.8em;
+    margin-right: 0.8em;
     font-size: 1.1em;
   }
 
@@ -209,9 +210,13 @@
     background-color: var(--bg, $fallback--bg);
   }
 
+  .nav-panel-heading {
+   // breaks without a unit
+   --panel-heading-height-padding: 0em;
+  }
+
   .fa-scale-110 {
     margin-right: 0.8em;
   }
-
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fc89ca3d..7942f23c 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -30,6 +30,7 @@
 .NavigationPins {
   display: flex;
   overflow: hidden;
+  height: 100%;
 
   .alert-dot {
     border-radius: 100%;
@@ -49,6 +50,7 @@
     flex: 0 0 3em;
     min-width: 2em;
     text-align: center;
+    overflow: visible;
 
     & .svg-inline--fa,
     & .iconLetter {
@@ -56,10 +58,13 @@
     }
 
     &.router-link-active {
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      border-bottom: 4px solid;
+
       & .svg-inline--fa,
       & .iconLetter {
-        color: $fallback--text;
-        color: var(--selectedMenuText, $fallback--text);
+        color: inherit;
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2