84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
elbyid = (id) => document.getElementById(id);
|
|
clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
|
clamp01 = (num) => clamp(num, 0, 1);
|
|
sign = (num) => (num === 0 ? 0 : num > 0 ? 1 : -1);
|
|
within = (num, min, max) => num >= min && num <= max;
|
|
lerp = (a, b, t) => a + t * (b - a);
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let side_open = localStorage.getItem("side_open") ? true : false;
|
|
|
|
const nav_el = elbyid("nav");
|
|
const nav_border_el = elbyid("nav_border");
|
|
const nav_side_el = elbyid("nav_side");
|
|
const side_el = elbyid("side");
|
|
const side_border_el = elbyid("side_border");
|
|
const main_el = elbyid("main");
|
|
const top_img_el = elbyid("top_img");
|
|
|
|
nav_fade = () => {
|
|
if (window.scrollY == 0) {
|
|
if (!side_open) {
|
|
side_el.style.backgroundColor = side_border_el.style.backgroundColor =
|
|
"#80808000";
|
|
} else {
|
|
side_el.style.backgroundColor = "#808080FF";
|
|
side_border_el.style.backgroundColor = "#777777FF";
|
|
}
|
|
|
|
nav_el.style.backgroundColor = nav_border_el.style.backgroundColor =
|
|
"#80808000";
|
|
} else {
|
|
nav_el.style.backgroundColor = side_el.style.backgroundColor =
|
|
"#808080FF";
|
|
nav_border_el.style.backgroundColor =
|
|
side_border_el.style.backgroundColor = "#777777FF";
|
|
}
|
|
};
|
|
nav_fade();
|
|
nav_el.style.transition =
|
|
nav_border_el.style.transition =
|
|
side_el.style.transition =
|
|
side_border_el.style.transition =
|
|
"background-color 0.166s";
|
|
|
|
window.addEventListener("scroll", (event) => {
|
|
nav_fade();
|
|
});
|
|
|
|
open_side = () => {
|
|
side_open = true;
|
|
localStorage.setItem("side_open", "open");
|
|
|
|
nav_side_el.style.width = "240px";
|
|
side_el.style.width = "240px";
|
|
side_el.classList.add("open");
|
|
side_border_el.style.left = "240px";
|
|
main_el.style.paddingLeft = "240px";
|
|
};
|
|
close_side = () => {
|
|
side_open = false;
|
|
localStorage.removeItem("side_open");
|
|
|
|
nav_side_el.style.width = "auto";
|
|
side_el.style.width = "64px";
|
|
side_el.classList.remove("open");
|
|
side_border_el.style.left = "64px";
|
|
main_el.style.paddingLeft = "64px";
|
|
};
|
|
update_side = () => {
|
|
if (side_open) {
|
|
open_side();
|
|
} else {
|
|
close_side();
|
|
}
|
|
nav_fade();
|
|
};
|
|
update_side();
|
|
toggle_side = () => {
|
|
side_open = !side_open;
|
|
update_side();
|
|
};
|
|
});
|
|
|
|
window.addEventListener("load", () => {});
|