From c0dc4aaa13a12fe9ca0f11acbed2ef8b35074117 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
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 '<section>';
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;
?>
</nav>
-
-
-
- <nav class="navbar navbar-expand-lg navbar-dark d-none">
-
- <div id="navbarInnerContainer">
-
- <h1>
- <!-- my-0 py-0 -->
- <?php
- printf( '<a class="navbar-brand" href="%1$s" rel="home">',
- esc_url( home_url( '/' ) )
- );
-
- echo inline_svg( 'svg-rdnyc-logo',
- array(
- 'svg_class' => 'img header-logo',
- 'svg_title' => 'Recovery Dharma New York City',
- 'svg_role_img' => true,
- 'svg_aria_hidden' => false
- )
- );
-
- echo "</a>";
- ?>
- </h1>
-
- <!-- collapsed navbar-toggler -->
- <!-- <button class="hamburger hamburger--squeeze" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="hamburger-box">
- <span class="hamburger-inner"></span>
- </span>
- </button> -->
-
- <?php
- // using widget to include social icons, so they can be edited by wordpress users
- if ( is_active_sidebar( 'navbar-socialicon-widget' ) ) :
- dynamic_sidebar( 'navbar-socialicon-widget' );
- endif;
- ?>
-
- </div>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
- <?php
- // main navigation menu
- if ( has_nav_menu( 'navbar-main-menu' ) ) {
- // echo '<section>';
- wp_nav_menu([
- 'theme_location' => 'navbar-main-menu',
- 'depth' => 1,
- 'menu' => 'navbar-main-menu',
- // 'container' => 'div',
- // 'container_id' => 'section-navbar-main-menu',
- 'menu_class' => 'navbar-nav',
- 'menu_item_class' => 'nav-item',
- 'link_class' => 'nav-link'
- ]);
- // echo '</section>';
- }
- ?>
-
- </div>
-
- </nav>
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"
},