fix: tweak nav indicator so it's a bit more prominent (#1788)

src/routes/_components/NavItem.html

@@ -12,7 +12,9 @@
     />
     <span class="nav-link-label">{label}</span>
   </div>
+  <div class="nav-indicator-wrapper">
     <div class="nav-indicator" ref:indicator></div>
+  </div>
 </a>
 <style>
   .main-nav-link {
@@ -40,10 +42,16 @@
     background: var(--nav-a-selected-bg-hover);
   }
 
-  .nav-indicator {
+  .nav-indicator-wrapper {
     width: 100%;
     height: var(--nav-indicator-height);
     background: var(--nav-a-border);
+    display: flex;
+  }
+
+  .nav-indicator {
+    flex: 1;
+    background: var(--nav-a-border);
     transform-origin: left;
   }
 
@@ -56,12 +64,16 @@
     background: var(--nav-a-border-hover);
   }
 
+  .main-nav-link.selected .nav-indicator-wrapper {
+    background: var(--nav-a-border-hover);
+  }
+
   .main-nav-link.selected .nav-indicator {
-    background: var(--nav-a-selected-border);
+    background: var(--nav-indicator-bg);
   }
 
   .main-nav-link.selected:hover .nav-indicator {
-    background: var(--nav-a-selected-border-hover);
+    background: var(--nav-indicator-bg-hover);
   }
 
   .main-nav-link:hover {

src/scss/themes/_base.scss

@@ -34,6 +34,8 @@
   --nav-a-selected-active-bg: #{lighten($main-theme-color, 17%)};
   --nav-svg-fill: #{$secondary-text-color};
   --nav-text-color: #{$secondary-text-color};
+  --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
+  --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.85)};
 
   --nav-a-selected-border-hover: #{$secondary-text-color};
   --nav-a-selected-bg-hover: #{lighten($main-theme-color, 15%)};

src/scss/variables.scss

@@ -19,8 +19,8 @@
   //
 
   --nav-font-size: 1rem;
-  --nav-indicator-height: 1px;
-  --nav-border-bottom: 1px;
+  --nav-indicator-height: 2px;
+  --nav-border-bottom: 0px;
   --nav-icon-pad-v: 15px;
   --nav-icon-pad-h: 20px;
   --nav-icon-size: 20px;
@@ -45,6 +45,8 @@
     --nav-icon-pad-v: 20px;
     --nav-icon-pad-h: 10px;
     --nav-icon-size: 25px;
+    --nav-indicator-height: 4px;
+    --nav-border-bottom: 0px;
   }
 
   @media (max-width: 767px) {