From c0dc4aaa13a12fe9ca0f11acbed2ef8b35074117 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Mon, 26 Jul 2021 18:02:36 -0400 Subject: [PATCH] navbar menu working with 1-level depth submenus --- assets/css/_bs-colors.scss | 1 + assets/css/_bs-load.scss | 8 +-- assets/css/_nav-bar-help.scss | 90 ++++++++++++++++++++++++++---- assets/js/_main-nav-menu-helper.js | 27 +++++++++ assets/js/main.js | 6 +- header.php | 68 +--------------------- package-lock.json | 25 +++++---- package.json | 2 +- 8 files changed, 133 insertions(+), 94 deletions(-) create mode 100644 assets/js/_main-nav-menu-helper.js diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss index a5ab89d..33f9f70 100644 --- a/assets/css/_bs-colors.scss +++ b/assets/css/_bs-colors.scss @@ -63,3 +63,4 @@ $navbar-dark-active-color: $white; $navbar-dark-disabled-color: rgba($white, 0.45); $navbar-dark-toggler-border-color: rgba($white, 0.3); $component-active-bg: $primary; +// $custom-dropdown-menu-background: \ No newline at end of file diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss index 6ac6199..c41fb91 100644 --- a/assets/css/_bs-load.scss +++ b/assets/css/_bs-load.scss @@ -23,11 +23,11 @@ @import "../../node_modules/bootstrap/scss/forms"; @import "../../node_modules/bootstrap/scss/buttons"; @import "../../node_modules/bootstrap/scss/transitions"; -// @import "../../node_modules/bootstrap/scss/dropdown"; +@import "../../node_modules/bootstrap/scss/dropdown"; // @import "../../node_modules/bootstrap/scss/button-group"; -@import "../../node_modules/bootstrap/scss/nav"; -@import "../../node_modules/bootstrap/scss/navbar"; -// @import "../../node_modules/bootstrap/scss/card"; +// @import "../../node_modules/bootstrap/scss/nav"; +// @import "../../node_modules/bootstrap/scss/navbar"; +@import "../../node_modules/bootstrap/scss/card"; // @import "../../node_modules/bootstrap/scss/accordion"; // @import "../../node_modules/bootstrap/scss/breadcrumb"; // @import "../../node_modules/bootstrap/scss/pagination"; diff --git a/assets/css/_nav-bar-help.scss b/assets/css/_nav-bar-help.scss index 2aa2c07..2a4cb81 100644 --- a/assets/css/_nav-bar-help.scss +++ b/assets/css/_nav-bar-help.scss @@ -93,17 +93,19 @@ nav#top-navbar-grid-outer { } } div#top-navbar-grid-main-menu-outer { - @extend .d-none; - &.show, &.collapsing { - @extend .d-grid; - grid-column-start: 1; - grid-column-end: 3; - grid-row-start: 3; - grid-row-end: 4; - justify-items: center; + @include media-breakpoint-down(lg) { + display: none; + &.show, &.collapsing { + display: grid; + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 3; + grid-row-end: 4; + justify-items: center; + } } - @extend .d-lg-grid; @include media-breakpoint-up(lg) { + display: grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; @@ -114,7 +116,7 @@ nav#top-navbar-grid-outer { ul#menu-navbar-main-menu { @extend .d-grid; grid-template-columns: 1fr; - list-style-type: none; + list-style: none; padding: 0; margin: 1em 0 0 0; @extend .d-lg-inline; @@ -139,6 +141,74 @@ nav#top-navbar-grid-outer { color: $gray-300; } } + &.menu-item-has-children { + @extend .dropdown; + & > a.top-navbar-grid-main-menu-item-link { + @extend .dropdown-toggle; + &:hover { + @extend .text-decoration-none; + } + &.shown { + color: $primary; + } + } + ul.sub-menu { + display: none; + color: $gray-300; + list-style: none; + min-width: 10rem; + background-color: tint-color($spaceblue-800, 5%); + &.show { + display: block; + } + @include media-breakpoint-down(lg) { + position: relative; + color: $gray-300; + // background-color: shade-color($gray-900, 50%); + 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; + } + @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; + 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; + clear: both; + font-weight: inherit; + white-space: nowrap; + border: 0; + text-decoration: none; + } + } + } + + } + // &:hover { + // ul.sub-menu { + // display: block; + // } + // } + } } } } diff --git a/assets/js/_main-nav-menu-helper.js b/assets/js/_main-nav-menu-helper.js new file mode 100644 index 0000000..2ad0b5a --- /dev/null +++ b/assets/js/_main-nav-menu-helper.js @@ -0,0 +1,27 @@ +/** + * main nav menu helper + */ +var mainMenuDropdownList = [].slice.call(document.querySelectorAll('li.menu-item.menu-item-has-children')); + +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 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 48979e3..c805d8a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,8 +2,10 @@ import '../css/app.scss' // Import svg files for webpack handling -import "../raw/rdnyc-logo.svg"; // rdnyc logo +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/@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"; @@ -20,6 +22,8 @@ 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/header.php b/header.php index 4efcc24..692cf2b 100644 --- a/header.php +++ b/header.php @@ -89,7 +89,7 @@ namespace WP_RDNYC; // echo '
'; wp_nav_menu([ 'theme_location' => 'navbar-main-menu', - 'depth' => 1, + 'depth' => 2, 'menu' => 'navbar-main-menu', 'container' => 'div', 'container_id' => 'top-navbar-grid-main-menu-outer', @@ -102,69 +102,3 @@ namespace WP_RDNYC; ?> - - - -
'; - } - ?> - - - - diff --git a/package-lock.json b/package-lock.json index 7ec908f..3c8b658 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "dependencies": { "@fontsource/overpass": "^4.x", "@fontsource/permanent-marker": "^4.x", - "@mdi/svg": "^5.x", "@popperjs/core": "^2.x", "bootstrap": "^5.x", + "bootstrap-icons": "^1.5.0", "hamburgers": "^1.x", "regenerator": "^0.14.7" }, @@ -1586,11 +1586,6 @@ "resolved": "https://registry.npmjs.org/@fontsource/permanent-marker/-/permanent-marker-4.5.0.tgz", "integrity": "sha512-pQD7//FSAXNShAa8AfY5B9SKP3CiLLepx8iQlBfp3QdUNbQ4q8vVMrx8le7y6nrhr3+5peeNPYf9bin9+ZYkow==" }, - "node_modules/@mdi/svg": { - "version": "5.9.55", - "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", - "integrity": "sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==" - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2200,6 +2195,14 @@ "@popperjs/core": "^2.9.2" } }, + "node_modules/bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==", + "engines": { + "node": ">=10" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -8869,11 +8872,6 @@ "resolved": "https://registry.npmjs.org/@fontsource/permanent-marker/-/permanent-marker-4.5.0.tgz", "integrity": "sha512-pQD7//FSAXNShAa8AfY5B9SKP3CiLLepx8iQlBfp3QdUNbQ4q8vVMrx8le7y6nrhr3+5peeNPYf9bin9+ZYkow==" }, - "@mdi/svg": { - "version": "5.9.55", - "resolved": "https://registry.npmjs.org/@mdi/svg/-/svg-5.9.55.tgz", - "integrity": "sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==" - }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -9374,6 +9372,11 @@ "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==", "requires": {} }, + "bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index c27d612..51cf9a1 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "dependencies": { "@fontsource/overpass": "^4.x", "@fontsource/permanent-marker": "^4.x", - "@mdi/svg": "^5.x", "@popperjs/core": "^2.x", "bootstrap": "^5.x", + "bootstrap-icons": "^1.5.0", "hamburgers": "^1.x", "regenerator": "^0.14.7" },