diff options
| author | curly <curlybryce@protonmail.com> | 2023-01-11 11:22:29 -0700 |
|---|---|---|
| committer | curly <curlybryce@protonmail.com> | 2023-01-11 11:22:29 -0700 |
| commit | 4bd45d754821448b37c206544cbbfddf04360988 (patch) | |
| tree | b8be4c2dc2883decef7a1a8c36262e947ade417c /src/assets/js/main.js | |
| parent | 5d4988161300f368f4252628f6e2588ce75ef101 (diff) | |
| download | infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.gz infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.tar.bz2 infernal.garden-4bd45d754821448b37c206544cbbfddf04360988.zip | |
mobile nav complete
Diffstat (limited to 'src/assets/js/main.js')
| -rw-r--r-- | src/assets/js/main.js | 44 |
1 files changed, 44 insertions, 0 deletions
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 <body> 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 |