57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
/**
|
||
* This script will handle the layout changes
|
||
* when you go from chad computer screen
|
||
* to shitty mobile screen.
|
||
*
|
||
* Author: Atomos821
|
||
*/
|
||
|
||
"use strict";
|
||
|
||
const defaultFontSize = 16; // unit: px.
|
||
const matchValue = 48; // unit: em.
|
||
|
||
function sideMenu(bool) {
|
||
const nav = document.querySelector('header nav');
|
||
const overlay = document.querySelector('div[overlay-menu-content]');
|
||
|
||
if (!bool) {
|
||
// Restore nav to initial state.
|
||
nav.removeAttribute('style');
|
||
nav.querySelectorAll('a').forEach(link => link.removeAttribute('style'));
|
||
nav.querySelector('button[aki-menu]').removeAttribute('style');
|
||
|
||
if (overlay.hasAttribute('opened')) {
|
||
overlay.removeAttribute('opened');
|
||
overlay.setAttribute('closed', null);
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
nav.style.justifyContent = 'flex-start';
|
||
nav.querySelector('button[aki-menu]').style.display = 'block';
|
||
nav.querySelectorAll('a').forEach(link => link.style.display = 'none');
|
||
}
|
||
|
||
/**
|
||
* Toggles the side menu, either displaying or hiding it,
|
||
* depending on the attributes of the overlay menu.
|
||
*/
|
||
function toggleMenu() {
|
||
const overlay = document.querySelector('div[overlay-menu-content]');
|
||
|
||
if (overlay.hasAttribute('opened')) {
|
||
overlay.removeAttribute('opened');
|
||
overlay.setAttribute('closed', null);
|
||
} else {
|
||
overlay.removeAttribute('closed');
|
||
overlay.setAttribute('opened', null);
|
||
}
|
||
}
|
||
|
||
// "Plz don't look sempai~ !!!" ｏ(≧▼≦○〃
|
||
let widthMatch = window.matchMedia(`(max-width: ${matchValue}em)`);
|
||
widthMatch.addEventListener('change', matchedMedia => (matchedMedia.matches || window.innerWidth <= (matchValue * defaultFontSize)) ? sideMenu(true) : sideMenu(false));
|
||
widthMatch.dispatchEvent(new Event("change")); // Force event on page load.
|
||
document.querySelector('header nav button[aki-menu]').addEventListener('click', () => toggleMenu()); |