navbar working

assets/css/_nav-bar-help.scss

@@ -0,0 +1,47 @@
+.navbar-expand-lg {
+  .nav-item {
+    margin-left: 2px;
+    a {
+      &.nav-link {
+        padding: 0 0 0 6px;
+        margin: 8px 0 8px 0;
+        border-left: 6px transparent solid;
+        &.active {
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
+        &:hover, &:active {
+          color: $primary !important;
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .navbar-expand-lg {
+    .nav-item {
+      margin-left: 0;
+      a {
+        &.nav-link {
+          padding: 0 0 6px 0;
+          margin: 0 12px 0 12px;
+          border-left: none;
+          border-top: 6px transparent solid;
+          border-bottom: 6px transparent solid;
+          &.active {
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
+          &:hover, &:active {
+            color: $primary !important;
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
+        }
+      }
+    }
+  }
+}

assets/css/_nav-burger.scss

@@ -0,0 +1,56 @@
+/* Hamburger settings overrides */
+$hamburger-padding-x: 0.95rem !default;
+$hamburger-padding-y: 0.625rem !default;
+$hamburger-layer-width: 1.5rem !default;
+$hamburger-layer-height: 2px !default;
+$hamburger-layer-spacing: 6px !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default;
+$hamburger-layer-border-radius: 0.25rem !default;
+$hamburger-hover-opacity: 0.7 !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+/* import hamburgers sass */
+@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
+
+/* correct colors to match bootstrap defaults */
+.navbar-light {
+  .hamburger {
+    &.navbar-toggler {
+      border: 1px $navbar-light-toggler-border-color solid !important;
+      .hamburger-inner {
+        &,
+        &::before,
+        &::after {
+          background-color: $navbar-light-color;
+        }
+      }
+      &.is-active {
+        .hamburger-inner::after {
+          background-color: $navbar-light-color;
+        }
+      }
+    }
+  }
+}
+.navbar-dark {
+  .hamburger {
+    &.navbar-toggler {
+      border: 1px $navbar-dark-toggler-border-color solid !important;
+      .hamburger-inner {
+        &,
+        &::before,
+        &::after {
+          background-color: $navbar-dark-color;
+        }
+      }
+      &.is-active {
+        .hamburger-inner::after {
+          background-color: $navbar-dark-color;
+        }
+      }
+    }
+  }
+}

assets/css/app.scss

@@ -7,7 +7,11 @@
 /*SVG ICON SYSTEM*/
 @import "svg-icons";
 
+/* Navbar toggler icon override */
+@import "nav-burger";
 
+/* Navbar custom styling */
+@import "nav-bar-help";
 
 /* main */
 html,
@@ -39,6 +43,11 @@ a {
     }
   }
 }
+
+/* navbar menus */
+// nav.navbar ul.navbar-nav li.menu-item
+
+/* more */
 .border-gray-900 {
   border-color: $gray-900 !important;
 }
@@ -82,3 +91,4 @@ a {
   padding-top: 2px;
   padding-bottom: 2px;
 }
+

assets/js/_hamburger-helper.js

@@ -0,0 +1,12 @@
+const togglerBtn = document.getElementById("navbarSupportedContentToggler");
+const navbarContent = document.getElementById("navbarSupportedContent");
+
+navbarContent.addEventListener("show.bs.collapse", () => {
+  console.log("opening navbar content");
+  togglerBtn.classList.toggle("is-active");
+});
+
+navbarContent.addEventListener("hide.bs.collapse", () => {
+  console.log("closing navbar content");
+  togglerBtn.classList.toggle("is-active");
+});

assets/js/main.js

@@ -7,6 +7,26 @@ import "../../node_modules/@mdi/svg/svg/desktop-classic.svg"; // brand
 // other:
 import "../../node_modules/@mdi/svg/svg/home.svg";
 import "../../node_modules/@mdi/svg/svg/information.svg";
+import "../../node_modules/@mdi/svg/svg/account.svg";
+import "../../node_modules/@mdi/svg/svg/briefcase-account.svg";
+import "../../node_modules/@mdi/svg/svg/zip-disk.svg";
+import "../../node_modules/@mdi/svg/svg/typewriter.svg";
+import "../../node_modules/@mdi/svg/svg/calendar-clock.svg";
+import "../../node_modules/@mdi/svg/svg/tag-multiple.svg";
+import "../../node_modules/@mdi/svg/svg/rss.svg";
+import "../../node_modules/@mdi/svg/svg/account-hard-hat.svg";
+import "../../node_modules/@mdi/svg/svg/open-in-new.svg";
+// social
+import "../../node_modules/@mdi/svg/svg/linkedin.svg";
+import "../../node_modules/@mdi/svg/svg/github.svg";
+import "../../node_modules/@mdi/svg/svg/key-variant.svg";
+// import "../raw/gitea.svg";
+import "../../node_modules/@mdi/svg/svg/goodreads.svg";
+import "../../node_modules/@mdi/svg/svg/twitter.svg";
+import "../../node_modules/@mdi/svg/svg/facebook.svg";
+import "../../node_modules/@mdi/svg/svg/instagram.svg";
+import "../../node_modules/@mdi/svg/svg/steam.svg";
+import "../../node_modules/@mdi/svg/svg/discord.svg";
 
 // Import Bootstrap JS
 import 'bootstrap/js/dist/collapse';
@@ -14,8 +34,5 @@ import 'bootstrap/js/dist/alert';
 import 'bootstrap/js/dist/button';
 import 'bootstrap/js/dist/dropdown';
 
-// Import JS Modules
+// import navbar burger code
-import menu_init from './modules/menu'
+import "./_hamburger-helper";
-
-// Load Menu Script
-document.addEventListener( 'DOMContentLoaded', menu_init );

assets/js/modules/menu.js

@@ -1,30 +0,0 @@
-export default () => {
-	const toggles = document.querySelectorAll('.toggle')
-	const menu   = document.querySelector('.nav-mobile')
-
-	if ( ! toggles || ! menu ) {
-		return;
-	}
-
-	let active = false
-
-	toggles.forEach(toggle => {
-		toggle.addEventListener( 'click', () => {
-			if ( active ) {
-				open();
-			} else {
-				close();
-			}
-		})
-	})
-
-	function open() {
-		menu.classList.remove('active')
-		active = false
-	}
-
-	function close() {
-		menu.classList.add('active')
-		active = true
-	}
-}

functions.php

@@ -9,16 +9,18 @@ define( 'WP_73k_VERSION', wp_get_theme()->version );
 define( 'WP_73k_DIR', __DIR__ );
 define( 'WP_73k_URL', get_template_directory_uri() );
 
+/**
+ * Function to support inline SVG icons by name with div wrapper
+ */
 function svg_icon_use($icon_name, $div_class) {
-  echo "<div class=\"$div_class $icon_name\">";
+  $output = "<div class=\"$div_class $icon_name\"><svg class=\"$icon_name\" aria-hidden=\"true\">";
-  echo "<svg class=\"$icon_name\" aria-hidden=\"true\">";
+  $output .= "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
-
+  return $output . "</svg></div>";
-  echo "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
-
-  echo "</svg>";
-  echo "</div>";
 };
 
+/**
+ * Autoloader for browersync
+ */
 require_once( WP_73k_DIR . '/vendor/autoload.php' );
 
 \A7\autoload( __DIR__ . '/src' );

header.php

@@ -33,7 +33,7 @@ namespace WP_73k;
           esc_url( home_url( '/' ) )
         );
 
-        svg_icon_use("mdi-desktop-classic", "icon baseline");
+        echo svg_icon_use("mdi-desktop-classic", "icon baseline");
 
         printf( ' <span class="fw-light font-brand">\\\\%1$s</span>',
           esc_html( get_bloginfo( 'name' ) )
@@ -43,59 +43,35 @@ namespace WP_73k;
       ?>
     </h1>
 
+    <button class="hamburger hamburger--vortex collapsed navbar-toggler" 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 d-flex">
+        <span class="hamburger-inner"></span>
+      </span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
       <?php
         if ( has_nav_menu( 'primary' ) ) {
           wp_nav_menu([
             'theme_location'  => 'primary',
-					'container'       => 'nav',
+            'depth' => 1,
-					'container_class' => 'nav-primary ml-auto',
+            'menu'  => 'primary',
-					'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
+            'container'       => '',
+            'container_class' => '',
+            'menu_class'      => 'navbar-nav ms-auto',
+            'menu_item_class' => 'nav-item',
+            'link_class'      => 'nav-link font-monospace fs-6'
+            // 'link_before' => '<span>',
+            // 'link_after' => '</span>'
           ]);
-			} ?>
+        }
+      ?>
+
+    </div>
 
   </div>
 </nav>
 
-	<?php
-	// if ( has_nav_menu( 'primary' ) ) {
-	// 	wp_nav_menu( [
-	// 		'items_wrap'      => '<button class="toggle absolute pin-t pin-r mt-4 mr-4 button button-sm">Close</button><ul id="%1$s" class="%2$s">%3$s</ul>',
-	// 		'theme_location'  => 'primary',
-	// 		'container'       => 'nav',
-	// 		'container_class' => 'nav-mobile',
-	// 		'container_id'    => 'mobile-menu',
-	// 		'menu_class'      => 'list-reset m-12'
-	// 	] );
-	// }
-  ?>
-
-	<header class="header">
-		<div class="container mx-auto">
-			<?php
-			// $tag = 'p';
-			// if ( is_front_page() || is_home() ) {
-			// 	$tag = 'h1';
-			// }
-
-			// printf( '<%1$s class="h1 m-0"><a class="text-xl no-underline uppercase" href="%2$s" rel="home">%3$s</a></%1$s>',
-			// 	$tag,
-			// 	esc_url( home_url( '/' ) ),
-			// 	esc_html( get_bloginfo( 'name' ) )
-			// );
-
-			// if ( has_nav_menu( 'primary' ) ) {
-			// 	wp_nav_menu([
-			// 		'theme_location'  => 'primary',
-			// 		'container'       => 'nav',
-			// 		'container_class' => 'nav-primary ml-auto',
-			// 		'menu_class'      => 'list-reset m-0 md:flex md:justify-end md:items-center'
-			// 	]);
-			// }
-      ?>
-			<div class="menu-item">
-				<button class="toggle highlight">Menu</button>
-			</div>
-		</div>
-	</header>
 
   <main>

src/classes.php

@@ -21,3 +21,47 @@ add_filter( 'body_class', function( $classes ) {
   return $classes;
 
 });
+
+/*
+ * Filter to add CSS class to navbar menu <li> items
+ */
+add_filter( 'nav_menu_css_class' , function( $classes, $item, $args, $depth ) {
+  if ( 'primary' === $args->theme_location ) {
+    if (property_exists($args, 'menu_item_class')) {
+      array_push($classes, $args->menu_item_class);
+    }
+  }      
+  return $classes;
+}, 3, 4 );
+
+/*
+ * Filter to add CSS class to navbar menu item <a> links
+ */
+add_filter( 'nav_menu_link_attributes' , function( $atts, $item, $args ) {
+  if ( 'primary' === $args->theme_location ) {
+    $atts['class'] = (empty($atts['class'])) ? '' : $atts['class'];
+    if ( in_array('current_page_item', $item->classes) ) {
+      $atts['class'] .= ' active';
+    }
+    if (property_exists($args, 'link_class')) {
+      $atts['class'] .= ' ' . $args->link_class;
+    }
+  }
+  return $atts;
+}, 2, 3 );
+
+/*
+ * Filter to add icons to navbar menu items
+ */
+add_filter( 'wp_nav_menu_objects', function($items, $args) {
+  $svgicon_prefix = 'icon-';
+  foreach ( $items as $k => $object ) {
+    foreach ($object->classes as $c) {
+      if (substr( $c, 0, strlen( $svgicon_prefix ) ) === $svgicon_prefix) {
+        $icon_slug = str_replace($svgicon_prefix, '', $c);
+        $object->title = svg_icon_use($icon_slug, 'icon baseline') . ' ' . $object->title;
+      }
+    }
+  }
+  return $items;
+}, 1, 2 );