From 8e0c08eb72f8c4c17ec933ed6616a0d86f9d1867 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Tue, 27 Jul 2021 08:16:01 -0400
Subject: [PATCH] improved and streamlined menu display

---
 assets/css/_bs-custom.scss    |  4 ++++
 assets/css/_nav-bar-help.scss | 42 ++++++++++++++++++----------------
 src/classes.php               | 43 +++++++++++++++++++----------------
 3 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss
index 3184a49..076f353 100644
--- a/assets/css/_bs-custom.scss
+++ b/assets/css/_bs-custom.scss
@@ -2,6 +2,10 @@
 
 // Typography
 $font-size-base: 1.125rem;
+$line-height-base:            1.35;
+$line-height-sm:              1.15;
+$line-height-lg:              1.75;
+
 
 // 'native font stack' for sans via https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack
 $font-family-sans-serif:
diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss
index c325e83..e830d44 100644
--- a/assets/css/_nav-bar-help.scss
+++ b/assets/css/_nav-bar-help.scss
@@ -94,6 +94,7 @@ nav#top-navbar-grid-outer {
   div#top-navbar-grid-main-menu-outer {
     @include media-breakpoint-down(lg) {
       display: none;
+      margin: 1em 0 0 0;
       &.show, &.collapsing {
         display: grid;
         grid-column-start: 1;
@@ -105,6 +106,7 @@ nav#top-navbar-grid-outer {
     }
     @include media-breakpoint-up(lg) {
       display: grid;
+      margin: 0 !important;
       grid-column-start: 2;
       grid-column-end: 3;
       grid-row-start: 2;
@@ -113,20 +115,19 @@ nav#top-navbar-grid-outer {
       align-items: end;
     }
     ul#menu-navbar-main-menu {
+      list-style: none;
       @extend .d-grid;
       grid-template-columns: 1fr;
-      list-style: none;
-      padding: 0;
-      margin: 1em 0 0 0;
-      @extend .d-lg-inline;
-      @include media-breakpoint-up(lg) {
-        margin: 0;
-      }
-      li.menu-item {
+      @extend .d-lg-flex;
+      @extend .flex-lg-row;
+      @extend .p-0;
+      @extend .m-0;
+      & > li.menu-item {
         @extend .text-center;
-        @extend .py-2;
-        @extend .d-lg-inline;
+        @extend .my-2;
+        @extend .my-lg-0;
         @include media-breakpoint-up(lg) {
+          display: list-item;
           padding: 0 0 0 1.5em !important;
         }
         .top-navbar-grid-main-menu-item-link {
@@ -157,7 +158,7 @@ nav#top-navbar-grid-outer {
           &.show {
             color: $primary;
             &:hover {
-              text-decoration: none !important;
+              @extend .text-decoration-none;
             }
             div.icon.baseline {
               transform: rotate(180deg);
@@ -165,27 +166,28 @@ nav#top-navbar-grid-outer {
             }
           }
           &::after {
-            display: none;
+            @extend .d-none;
           }
         }
         .dropdown-menu.dropdown-menu-dark {
           background-color: shade-color($gray-800, 50%);
           li.menu-item {
-            padding: 4px 0 !important;
-            .top-navbar-grid-main-menu-item-link {
-              display: block;
-              width: 100%;
-              padding: .25rem 1rem 0 1rem;
+            .dropdown-item.top-navbar-grid-main-menu-item-link {
+              @extend .fw-normal;
+              padding: 0.25rem 1rem 0 1rem !important;
+              text-transform: inherit !important;
               &:hover {
-                text-decoration: none !important;
+                @extend .text-decoration-none;
                 color: $gray-900;
                 background-color: $primary;
               }
-              &.active {
+            }
+            &.active {
+              .dropdown-item.top-navbar-grid-main-menu-item-link {
                 color: $gray-900;
                 background-color: shade-color($primary, 25%);
                 &:hover {
-                  text-decoration: none !important;
+                  @extend .text-decoration-none;
                   background-color: $primary;
                 }
               }
diff --git a/src/classes.php b/src/classes.php
index b6023a9..4be1d62 100644
--- a/src/classes.php
+++ b/src/classes.php
@@ -59,33 +59,36 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
 class RDNYC_Menu_Walker extends Walker_Nav_Menu {
 
   function start_lvl(&$output, $depth = 0, $args = array()) {
-    $output .= "\n<ul class=\"dropdown-menu dropdown-menu-dark dropdown-menu-end\">\n";
+    $output .= "\n<ul class=\"dropdown-menu dropdown-menu-dark dropdown-menu-lg-end\">\n";
   }
 
   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
-      $item_html = '';
-      parent::start_el($item_html, $item, $depth, $args);
+    $item_html = '';
+    parent::start_el($item_html, $item, $depth, $args);
 
-      if ( $item->is_dropdown && $depth === 0 ) {
-          $item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown"', $item_html );
-          $item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
-      }
+    if ( $item->is_dropdown && $depth === 0 ) {
+      $item_html = str_replace( '<a', '<a class="dropdown-toggle top-navbar-grid-main-menu-item-link" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"', $item_html );
+      $item_html = str_replace( '</a>', inline_svg( 'bsi-chevron-down', array( 'div_class' => 'icon baseline ms-1' ) ) . '</a>', $item_html );
+    }
 
-      $output .= $item_html;
-   }
+    if ( $item->menu_item_parent && $item->menu_item_parent > 0 && $depth > 0 ) {
+      $item_html = str_replace( '<a', '<a class="dropdown-item top-navbar-grid-main-menu-item-link"', $item_html );
+    }
 
-   function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
-       if ( $element->current )
-       $element->classes[] = 'active';
+    $output .= $item_html;
+  }
 
-       $element->is_dropdown = !empty( $children_elements[$element->ID] );
+  function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
+    if ( $element->current )
+      $element->classes[] = 'active';
 
-       if ( $element->is_dropdown ) {
-          if ( $depth === 0 ) {
-              $element->classes[] = 'dropdown';
-          }
-       }
+    $element->is_dropdown = !empty( $children_elements[$element->ID] );
+
+    if ( $element->is_dropdown && $depth === 0 ) {
+      $element->classes[] = 'dropdown';
+    }
+
+    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
+  }
 
-   parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
-   }
 }
\ No newline at end of file