From 4bd45d754821448b37c206544cbbfddf04360988 Mon Sep 17 00:00:00 2001 From: curly Date: Wed, 11 Jan 2023 11:22:29 -0700 Subject: mobile nav complete --- src/assets/js/main.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 src/assets/js/main.js (limited to 'src/assets/js') diff --git a/src/assets/js/main.js b/src/assets/js/main.js new file mode 100644 index 0000000..462c456 --- /dev/null +++ b/src/assets/js/main.js @@ -0,0 +1,44 @@ +function mobile_nav_toggle() { + var nav = document.getElementById("nav"); + + if (nav.style.display == "unset") { + mobile_nav_off(); + } else { + mobile_nav_on(); + } +} + +function mobile_nav_on() { + var nav = document.getElementById("nav"); + nav.style.display = "unset"; + + // Subract mobile nav height from navbar + var mobile_nav = document.getElementsByClassName("mobile-nav")[0]; + nav.children[0].style.height = "calc(100vh - " + mobile_nav.clientHeight + "px)"; + mobile_nav.style.backgroundColor = "rgb(var(--secondary))"; + + // Hide content + var content = document.getElementById("content"); + content.style.display = "none"; + + // Align nav and mobile nav by setting + // the flow to column + var body = document.getElementsByTagName("body")[0]; + body.style.flexFlow = "column nowrap" +} + +// Undo all changes in mobile_nav_on() +function mobile_nav_off() { + var nav = document.getElementById("nav"); + nav.style.display = ""; + + var mobile_nav = document.getElementsByClassName("mobile-nav")[0]; + nav.children[0].style.height = ""; + mobile_nav.style.backgroundColor = ""; + + var content = document.getElementById("content"); + content.style.display = ""; + + var body = document.getElementsByTagName("body")[0]; + body.style.flexFlow = "" +} \ No newline at end of file -- cgit v1.2.3