adam/wp-73k
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

navbar working

Browse source
This commit is contained in:
Adam Piontek 2021-07-04 18:16:33 -04:00
parent b99281d42a
commit a81c43a655
22 changed files with 25452 additions and 25318 deletions

47
assets/css/_nav-bar-help.scss Normal file
View 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
View 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;
}
}
}
}
}

10
assets/css/app.scss
View file

@ -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
View 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");
});

27
assets/js/main.js
View file

@ -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";

30
assets/js/modules/menu.js
View file

@ -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
}
}