feat: responsive priority nav

2 files changed, 49 insertions, 2 deletions

diff --git a/static/desktop.css b/static/desktop.css
index 1b0eb43..7a20b0a 100644
--- a/static/desktop.css
+++ b/static/desktop.css
@@ -4,11 +4,9 @@
   }
 
   nav {
-    flex-direction: row-reverse;
     margin: 0;
     padding: 0;
     top: 0;
-    position: fixed;
     width: 100%;
   }
 
diff --git a/static/nav.js b/static/nav.js
new file mode 100644
index 0000000..2a8d83d
--- /dev/null
+++ b/static/nav.js
@@ -0,0 +1,49 @@
+const overflow = [];
+const nav = document.querySelector('nav');
+const more = nav.children[nav.children.length - 1];
+let navToggled = false;
+
+function showMore() {
+	more.text = more.text.replace("Less", "More");
+	const itemHeight = nav.children[0].offsetHeight;
+
+	if (!nav.contains(more)) {
+		nav.appendChild(more);
+	}
+
+	while (overflow.length > 0 && nav.offsetHeight <= itemHeight) {
+		nav.insertBefore(overflow.pop(), more);
+	}
+
+	while (nav.children.length > 0 && nav.offsetHeight > itemHeight) {
+		overflow.push(nav.removeChild(nav.children[nav.children.length - 2]));
+	}
+
+	if (overflow.length == 0) {
+		nav.removeChild(more);
+	}
+
+	navToggled = false;
+}
+
+function showAll() {
+	while (overflow.length > 0) {
+		nav.insertBefore(overflow.pop(), more);
+	}
+
+}
+
+window.addEventListener('resize', showMore);
+document.addEventListener('DOMContentLoaded', showMore);
+
+function toggleNav() {
+	if (navToggled = !navToggled) {
+		more.text = more.text.replace("More", "Less");
+		showAll();
+	} else {
+		more.text = more.text.replace("Less", "More");
+		showMore();
+	}
+}
+
+more.addEventListener("click", toggleNav);