navbar working
This commit is contained in:
parent
b99281d42a
commit
a81c43a655
47
assets/css/_nav-bar-help.scss
Normal file
47
assets/css/_nav-bar-help.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
assets/css/_nav-burger.scss
Normal file
56
assets/css/_nav-burger.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
12
assets/js/_hamburger-helper.js
Normal file
12
assets/js/_hamburger-helper.js
Normal file
|
|
@ -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");
|
||||
});
|
||||
|
|
@ -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 menu_init from './modules/menu'
|
||||
|
||||
// Load Menu Script
|
||||
document.addEventListener( 'DOMContentLoaded', menu_init );
|
||||
// import navbar burger code
|
||||
import "./_hamburger-helper";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -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\">";
|
||||
echo "<svg class=\"$icon_name\" aria-hidden=\"true\">";
|
||||
|
||||
echo "<use xlink:href=\"" . get_stylesheet_directory_uri() . "/dist/images/icons.svg#$icon_name\"></use>";
|
||||
|
||||
echo "</svg>";
|
||||
echo "</div>";
|
||||
$output = "<div class=\"$div_class $icon_name\"><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>";
|
||||
};
|
||||
|
||||
/**
|
||||
* Autoloader for browersync
|
||||
*/
|
||||
require_once( WP_73k_DIR . '/vendor/autoload.php' );
|
||||
|
||||
\A7\autoload( __DIR__ . '/src' );
|
||||
|
|
|
|||
68
header.php
68
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',
|
||||
'container_class' => 'nav-primary ml-auto',
|
||||
'menu_class' => 'list-reset m-0 md:flex md:justify-end md:items-center'
|
||||
'depth' => 1,
|
||||
'menu' => 'primary',
|
||||
'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>
|
||||
|
|
@ -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 );
|
||||
Loading…
Reference in a new issue