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/navigation/navigation_pins.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/components/navigation/navigation_pins.vue')

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