From 311b918077d67383dd2423d70d261bd6469ac36a Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Mon, 26 Jul 2021 20:51:08 -0400 Subject: [PATCH] fixed menu display to support default bootstrap menus with minimal styling --- assets/css/_nav-bar-help.scss | 104 +++++++++++++---------------- assets/js/_main-nav-menu-helper.js | 29 -------- assets/js/main.js | 6 +- custom-functions.php | 1 + header.php | 3 +- searchform.php | 2 +- src/classes.php | 42 +++++++++++- 7 files changed, 92 insertions(+), 95 deletions(-) delete mode 100644 assets/js/_main-nav-menu-helper.js diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss index 19861e2..c325e83 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_nav-bar-help.scss @@ -15,7 +15,6 @@ nav#top-navbar-grid-outer { @include media-breakpoint-up(md) { grid-template-rows: calc(5.3rem / 2) calc(5.3rem / 2) auto; } - // grid-auto-rows: calc(4.3rem / 2); div#top-navbar-grid-brand-outer { grid-column-start: 1; grid-column-end: 2; @@ -130,7 +129,7 @@ nav#top-navbar-grid-outer { @include media-breakpoint-up(lg) { padding: 0 0 0 1.5em !important; } - a.top-navbar-grid-main-menu-item-link { + .top-navbar-grid-main-menu-item-link { @extend .fw-bold; @extend .text-uppercase; @extend .text-decoration-none; @@ -140,72 +139,59 @@ nav#top-navbar-grid-outer { text-decoration-color: $primary !important; color: $gray-300; } + &.active { + color: $primary; + } } - &.menu-item-has-children { - @extend .dropdown; - & > a.top-navbar-grid-main-menu-item-link { - @extend .dropdown-toggle; - cursor: pointer; - &.shown { - color: $primary; - text-decoration: none !important; - &:hover { - text-decoration: none !important; - } + .dropdown-toggle { + cursor: pointer; + div.icon.baseline { + transform: rotate(0deg); + transition: transform 150ms ease; + svg { + top: inherit; + height: .75em; + width: .75em; } } - ul.sub-menu { + &.show { + color: $primary; + &:hover { + text-decoration: none !important; + } + div.icon.baseline { + transform: rotate(180deg); + transition: transform 150ms ease; + } + } + &::after { 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 { + } + } + .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; - } - @include media-breakpoint-down(lg) { - position: relative; - margin-top: 0.25em; - padding: 0.25em 1em 0 1em; - background-clip: border-box; - border: 1px solid $gray-700; - word-wrap: break-word; - } - @include media-breakpoint-up(lg) { - position: absolute; - padding: .5rem 0; - 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 0 1rem; - clear: both; - font-weight: inherit; - white-space: nowrap; - border: 0; - text-decoration: none; + width: 100%; + padding: .25rem 1rem 0 1rem; + &:hover { + text-decoration: none !important; + color: $gray-900; + background-color: $primary; + } + &.active { + color: $gray-900; + background-color: shade-color($primary, 25%); + &:hover { + text-decoration: none !important; + background-color: $primary; } } } - } - // &:hover { - // ul.sub-menu { - // display: block; - // } - // } - } + } } } } diff --git a/assets/js/_main-nav-menu-helper.js b/assets/js/_main-nav-menu-helper.js deleted file mode 100644 index 303d9e5..0000000 --- a/assets/js/_main-nav-menu-helper.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * main nav menu helper - */ -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 - - // get relevant elements and note if menu is already shown - var thisSubMenu = thisMenuLink.parentElement.querySelector('ul.sub-menu'); - var thisElShown = thisSubMenu.classList.contains('show'); - - // un-show all menus - document.querySelectorAll('li.menu-item.menu-item-has-children').forEach((otherEl) => { - var otherMenuLink = otherEl.querySelector('a.top-navbar-grid-main-menu-item-link'); - var otherSubMenu = otherEl.querySelector('ul.sub-menu'); - if (otherMenuLink) { otherMenuLink.classList.remove('shown'); } - if (otherSubMenu) { otherSubMenu.classList.remove('show'); } - }); - - // finally, if menu was not shown, show it - if (!thisElShown) { - thisMenuLink.classList.add('shown'); - thisSubMenu.classList.add('show'); - } - }); -}); diff --git a/assets/js/main.js b/assets/js/main.js index c805d8a..45222ff 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -4,8 +4,8 @@ import '../css/app.scss' // Import svg files for webpack handling import '../raw/rdnyc-logo.svg'; // rdnyc logo // other: -// import '../../node_modules/bootstrap-icons/icons/chevron-down.svg'; -// import '../../node_modules/bootstrap-icons/icons/chevron-up.svg'; +import '../../node_modules/bootstrap-icons/icons/chevron-down.svg'; +import '../../node_modules/bootstrap-icons/icons/search.svg'; // import "../../node_modules/@mdi/svg/svg/magnify.svg"; // search form button icon // import "../../node_modules/@mdi/svg/svg/home.svg"; // import "../../node_modules/@mdi/svg/svg/information.svg"; @@ -22,8 +22,6 @@ import 'bootstrap/js/dist/dropdown'; // import navbar burger code import "./_hamburger-helper"; -// import navbar dropdown menu helper code -import "./_main-nav-menu-helper"; // highlight any code blocks tagged with class 'to-highlight' document.addEventListener('DOMContentLoaded', (event) => { diff --git a/custom-functions.php b/custom-functions.php index 7c14721..018b9b4 100644 --- a/custom-functions.php +++ b/custom-functions.php @@ -52,4 +52,5 @@ function inline_svg( $svg_name, $atts = array() ) { return $svg_content; }; + ?> \ No newline at end of file diff --git a/header.php b/header.php index 692cf2b..425e7d4 100644 --- a/header.php +++ b/header.php @@ -95,7 +95,8 @@ namespace WP_RDNYC; 'container_id' => 'top-navbar-grid-main-menu-outer', 'menu_class' => 'top-navbar-grid-main-menu', 'menu_item_class' => 'top-navbar-grid-main-menu-item', - 'link_class' => 'top-navbar-grid-main-menu-item-link' + 'link_class' => 'top-navbar-grid-main-menu-item-link', + 'walker' => new RDNYC_Menu_Walker() ]); // echo ''; } diff --git a/searchform.php b/searchform.php index 343418b..fecf046 100644 --- a/searchform.php +++ b/searchform.php @@ -21,7 +21,7 @@ $seventythreek_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . es diff --git a/src/classes.php b/src/classes.php index 1c73ef0..b6023a9 100644 --- a/src/classes.php +++ b/src/classes.php @@ -8,6 +8,8 @@ namespace WP_RDNYC; +use \Walker_Nav_Menu; + add_filter( 'body_class', function( $classes ) { if ( is_singular( ['post', 'page'] ) ) { @@ -41,7 +43,7 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) { if ( 'navbar-main-menu' === $args->theme_location ) { $atts['class'] = (empty($atts['class'])) ? '' : $atts['class']; if ( in_array('current_page_item', $item->classes) ) { - $atts['class'] .= ' active'; + $atts['class'] .= ' active '; } if (property_exists($args, 'link_class')) { $atts['class'] .= ' ' . $args->link_class; @@ -49,3 +51,41 @@ add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) { } return $atts; }, 2, 3 ); + + +/** + * custom walker to handle nav main menu dropdowns (one level deep, bs5 doesn't have native submenu support) + */ +class RDNYC_Menu_Walker extends Walker_Nav_Menu { + + function start_lvl(&$output, $depth = 0, $args = array()) { + $output .= "\n