Execute needed js functions uppon ready
This commit is contained in:
parent
aadf911ff2
commit
573d2de139
2 changed files with 30 additions and 21 deletions
|
@ -1,16 +1,21 @@
|
||||||
// Mobile menu
|
// Mobile menu
|
||||||
|
|
||||||
const menuTrigger = document.querySelector(".menu-trigger");
|
(function() {
|
||||||
const menu = document.querySelector(".menu");
|
const menuTrigger = document.querySelector('.menu-trigger');
|
||||||
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
|
const menu = document.querySelector('.menu');
|
||||||
|
const mobileQuery =
|
||||||
|
getComputedStyle(document.body).getPropertyValue('--phoneWidth');
|
||||||
const isMobile = () => window.matchMedia(mobileQuery).matches;
|
const isMobile = () => window.matchMedia(mobileQuery).matches;
|
||||||
const isMobileMenu = () => {
|
const isMobileMenu = () => {
|
||||||
menuTrigger && menuTrigger.classList.toggle("hidden", !isMobile());
|
menuTrigger && menuTrigger.classList.toggle('hidden', !isMobile());
|
||||||
menu && menu.classList.toggle("hidden", isMobile());
|
menu && menu.classList.toggle('hidden', isMobile());
|
||||||
};
|
};
|
||||||
|
|
||||||
isMobileMenu();
|
isMobileMenu();
|
||||||
|
|
||||||
menuTrigger && menuTrigger.addEventListener("click", () => menu && menu.classList.toggle("hidden"));
|
menuTrigger &&
|
||||||
|
menuTrigger.addEventListener(
|
||||||
|
'click', () => menu && menu.classList.toggle('hidden'));
|
||||||
|
|
||||||
window.addEventListener("resize", isMobileMenu);
|
window.addEventListener('resize', isMobileMenu);
|
||||||
|
})();
|
|
@ -1,23 +1,27 @@
|
||||||
// Toggle theme
|
// Toggle theme
|
||||||
|
|
||||||
const getTheme = window.localStorage && window.localStorage.getItem("theme");
|
(function() {
|
||||||
const themeToggle = document.querySelector(".theme-toggle");
|
const getTheme = window.localStorage && window.localStorage.getItem('theme');
|
||||||
const isDark = getTheme === "dark";
|
const themeToggle = document.querySelector('.theme-toggle');
|
||||||
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
const isDark = getTheme === 'dark';
|
||||||
|
var metaThemeColor = document.querySelector('meta[name=theme-color]');
|
||||||
|
|
||||||
if (getTheme !== null) {
|
if (getTheme !== null) {
|
||||||
document.body.classList.toggle("dark-theme", isDark);
|
document.body.classList.toggle('dark-theme', isDark);
|
||||||
isDark ? metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
|
isDark ? metaThemeColor.setAttribute('content', '#252627') :
|
||||||
|
metaThemeColor.setAttribute('content', '#fafafa');
|
||||||
}
|
}
|
||||||
|
|
||||||
themeToggle.addEventListener("click", () => {
|
themeToggle.addEventListener('click', () => {
|
||||||
document.body.classList.toggle("dark-theme");
|
document.body.classList.toggle('dark-theme');
|
||||||
window.localStorage &&
|
window.localStorage &&
|
||||||
window.localStorage.setItem(
|
window.localStorage.setItem(
|
||||||
"theme",
|
'theme',
|
||||||
document.body.classList.contains("dark-theme") ? "dark" : "light",
|
document.body.classList.contains('dark-theme') ? 'dark' : 'light',
|
||||||
);
|
);
|
||||||
document.body.classList.contains("dark-theme") ?
|
document.body.classList.contains('dark-theme') ?
|
||||||
metaThemeColor.setAttribute("content", "#252627") : metaThemeColor.setAttribute("content", "#fafafa");
|
metaThemeColor.setAttribute('content', '#252627') :
|
||||||
|
metaThemeColor.setAttribute('content', '#fafafa');
|
||||||
;
|
;
|
||||||
});
|
});
|
||||||
|
})();
|
||||||
|
|
Loading…
Reference in a new issue