FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor main.js into smaller pieces, and moved navbar.js to assets

Browse source
This commit is contained in:
Aaron Qian 2022-11-10 23:23:50 -08:00 • committed by Aaron Qian
parent fd8eeb3330
commit 177dffe553
No known key found for this signature in database
GPG key ID: BF1A987C395B5B0E
19 changed files with 214 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

61
assets/scripts/sections/navbar.js Normal file
View file

@ -0,0 +1,61 @@
import $ from 'jquery';
const updateNavBar = () => {
if ($(document).scrollTop() > 40) {
$('#top-navbar').removeClass('initial-navbar');
$('#top-navbar').addClass('final-navbar shadow');
$('#navbar-toggler').removeClass('navbar-dark');
$('#navbar-toggler').addClass('navbar-light');
// color theme selector a.k.a. dark mode
$('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
// get the main logo from hidden img tag
let mainLogo = document.getElementById("main-logo")
if (mainLogo !== null) {
let logoURL = mainLogo.getAttribute("src");
$('#logo').attr("src", logoURL);
}
} else {
$('#top-navbar').removeClass('final-navbar shadow');
$('#top-navbar').addClass('initial-navbar');
$('#navbar-toggler').removeClass('navbar-light');
$('#navbar-toggler').addClass('navbar-dark');
// color theme selector a.k.a. dark mode
$('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
// get the inverted logo from hidden img tag
let invertedLogo = document.getElementById("inverted-logo")
if (invertedLogo !== null) {
let logoURL = invertedLogo.getAttribute("src");
$('#logo').attr("src", logoURL);
}
}
};
$(document).ready(function () {
// change navbar style on scroll
// ==================================================
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
// $.onscroll = function() {scrollFunction()};
$(document).scroll(function () {
updateNavBar();
});
// Creates a click handler to collapse the navigation when
// anchors in the mobile nav pop up are clicked
var navMain = $(".navbar-collapse");
if (navMain) {
navMain.on("click", "a", null, function (e) {
$('.navbar-collapse').collapse('hide');
});
}
updateNavBar();
});