From 385193272f115256d57725366462306bf580708e Mon Sep 17 00:00:00 2001
From: Jeremy McDermott <jeremy.mcdermott@gmail.com>
Date: Wed, 2 Oct 2024 13:19:24 -0300
Subject: [PATCH] LOYALIST-33 Visual indicator re: focus+active main
 menu/dropdown links

---
 .../src/scss/overrides/_navbar.scss           | 115 +++++++++++-------
 1 file changed, 72 insertions(+), 43 deletions(-)

diff --git a/custom/themes/the_loyalist_collection/src/scss/overrides/_navbar.scss b/custom/themes/the_loyalist_collection/src/scss/overrides/_navbar.scss
index cfac347..ca65131 100644
--- a/custom/themes/the_loyalist_collection/src/scss/overrides/_navbar.scss
+++ b/custom/themes/the_loyalist_collection/src/scss/overrides/_navbar.scss
@@ -1,22 +1,5 @@
 .region-nav-branding {
   flex-shrink: unset;
-}
-
-.navbar .navbar-brand {
-  margin-right: 0;
-  gap: $spacer * .75;
-
-  img {
-    margin-right: 0;
-  }
-
-  @media (max-width: 576px) {
-    .site-logo {
-      /*margin-right: $spacer * 0.75;*/
-      height: auto;
-      max-height: 72px;
-    }
-  }
 
   a.site-title {
     color: var(--bs-nav-link-color);
@@ -24,53 +7,99 @@
     line-height: 1;
     // Offset BS5 nav.branding boundary space characters re: wrap.
     margin-left: $spacer * -0.25;
-    padding: 0.25rem;
+    padding: $spacer * 0.25;
     text-decoration: transparent underline;
     text-underline-offset: $spacer * 0.35;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
 
   &:hover {
     color: var(--bs-nav-link-color);
   }
 
-  @media (min-width: 992px) {
-    .site-logo {
-      margin-right: $spacer * 1.25;
+  .navbar .navbar-brand {
+    margin-right: 0;
+    gap: $spacer * .75;
+
+    img {
+      margin-right: 0;
+    }
+
+    @media (max-width: 576px) {
+      .site-logo {
+        /*margin-right: $spacer * 0.75;*/
+        height: auto;
+        max-height: 72px;
+      }
     }
-    .site-title {
-      font-size: $font-size-base * 2.25;
+
+    @media (min-width: 992px) {
+      .site-logo {
+        margin-right: $spacer * 1.25;
+      }
+      .site-title {
+        font-size: $font-size-base * 2.25;
+      }
     }
   }
 }
 
 .navbar {
-  a {
+  .nav-main-menu {
+    flex: 0 0 auto;
+    max-width: 41.67%;
+  }
+
+  a,
+  .dropdown-toggle {
+    // Note: Accessible dropdown-toggle => Drupal|Menus|Main navigation|Menu link|Link = <button>.
     color: var(--bs-nav-link-color);
-    outline-offset: 1px;
-    padding: $spacer * 0.25;
+    outline-color: var(--bs-white);
+    padding-bottom: $spacer * 0.25;
+    padding-top: $spacer * 0.25;
     text-decoration: transparent $text-decoration-style;
+    transition: outline-color $transition-speed-default $transition-timing-default;
 
-    &:not(.active):hover {
-      text-decoration: var(--bs-nav-link-color) $text-decoration-style;
+    &:hover,
+    &:focus-visible.dropdown-item{
+      @include focus_outline(var(--bs-navbar-brand-color));
     }
 
-    &:focus-visible {
-      @include focus_outline(var(--bs-navbar-brand-color));
+    &.is-active,
+    &.active {
+      background-color: rgba(128, 128, 128, 0.1);
+      color: var(--bs-nav-link-color);
+
+      &:not(:focus-visible) {
+        @include focus_outline(var(--bs-secondary-border-subtle));
+      }
     }
   }
-}
-.nav-main-menu {
-  flex: 0 0 auto;
-  max-width: 41.67%;
-
-  a {
-    &.is-active:hover {
-      cursor: default;
-      text-decoration: transparent $text-decoration-style;
+
+  .nav-item:not(:last-child) {
+    margin-right: $spacer * 0.35;
+  }
+
+  .dropdown-menu {
+    padding: $spacer * 0.25;
+
+    .nav-item {
+      margin-bottom: $spacer * 0.35;
+      margin-right: inherit;
+    }
+
+    .dropdown-item {
+      line-height: normal;
+      padding: $spacer * 0.25 $spacer * 0.5;
+
+      &:focus-visible {
+        // Mirror BS5 nav-link visual focus indicator for dropdown links.
+        box-shadow: 0 0 0 $spacer * 0.25 var(--bs-focus-ring-color);
+        outline: 0;
+      }
+
+      @media (min-width: 768px) {
+        white-space: normal;
+      }
     }
   }
 }