From 9d3d8ede6327ad1e7fb67c55af9b9541fed5b298 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Mon, 26 Jul 2021 19:11:33 -0400
Subject: [PATCH] improved menu styling and handling. menu buttons that might
 have links now work (link is ignored)

---
 assets/css/_nav-bar-help.scss      | 35 ++++++++++++++----------------
 assets/js/_main-nav-menu-helper.js | 12 +++++-----
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss
index 2a4cb81..19861e2 100644
--- a/assets/css/_nav-bar-help.scss
+++ b/assets/css/_nav-bar-help.scss
@@ -145,54 +145,51 @@ nav#top-navbar-grid-outer {
           @extend .dropdown;
           & > a.top-navbar-grid-main-menu-item-link {
             @extend .dropdown-toggle;
-            &:hover {
-              @extend .text-decoration-none;
-            }
+            cursor: pointer;
             &.shown {
               color: $primary;
+              text-decoration: none !important;
+              &:hover {
+                text-decoration: none !important;
+              }
             }
           }
           ul.sub-menu {
             display: none;
+            margin: 0;
             color: $gray-300;
             list-style: none;
             min-width: 10rem;
             background-color: tint-color($spaceblue-800, 5%);
+            border-radius: 0.25rem;
+            font-size: 1rem;
             &.show {
               display: block;
             }
             @include media-breakpoint-down(lg) {
               position: relative;
-              color: $gray-300;
-              // background-color: shade-color($gray-900, 50%);
+              margin-top: 0.25em;
               padding: 0.25em 1em 0 1em;
-              margin: 0;
               background-clip: border-box;
-              word-wrap: break-word;
               border: 1px solid $gray-700;
-              border-radius: 0.25rem;
+              word-wrap: break-word;
             }
             @include media-breakpoint-up(lg) {
-              margin: 0;
-              border: 1px solid rgba(0,0,0,0.15);
-              border-color: rgba(0, 0, 0, 0.15);
-              border-radius: 0.25rem;
-              box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
               position: absolute;
-              z-index: 1000;
-              inset: -1em 0px auto auto;
-              transform: translate(0px, 40px);
               padding: .5rem 0;
-              font-size: 1rem;
-              text-align: left;
               background-clip: padding-box;
+              border: 1px solid rgba(0,0,0,0.15);
+              box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
+              z-index: 1000;
+              inset: 1.5em 0px auto auto;
+              text-align: left;
               li.menu-item {
                 padding: 8px 0 8px 0 !important;
                 a.top-navbar-grid-main-menu-item-link {
                   text-align: left;
                   display: block;
                   width: 100%;
-                  padding: .25rem 1rem;
+                  padding: .25rem 1rem 0 1rem;
                   clear: both;
                   font-weight: inherit;
                   white-space: nowrap;
diff --git a/assets/js/_main-nav-menu-helper.js b/assets/js/_main-nav-menu-helper.js
index 2ad0b5a..303d9e5 100644
--- a/assets/js/_main-nav-menu-helper.js
+++ b/assets/js/_main-nav-menu-helper.js
@@ -1,13 +1,15 @@
 /**
  * main nav menu helper
  */
-var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children'));
+var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children > a.top-navbar-grid-main-menu-item-link'));
+
+mainMenuDropdownList.forEach((thisMenuLink) => {
+  thisMenuLink.addEventListener("click", (e) => {
+    e.preventDefault();   // Cancel the native event
+    e.stopPropagation();  // Don't bubble/capture the event any further
 
-mainMenuDropdownList.forEach((el) => {
-  el.addEventListener("click", (e) => {
     // get relevant elements and note if menu is already shown
-    var thisMenuLink = el.querySelector('a.top-navbar-grid-main-menu-item-link');
-    var thisSubMenu = el.querySelector('ul.sub-menu');
+    var thisSubMenu = thisMenuLink.parentElement.querySelector('ul.sub-menu');
     var thisElShown = thisSubMenu.classList.contains('show');
 
     // un-show all menus