From 9bd21d3d07b74fdd0e761be72592fdff1d546861 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Sat, 12 Apr 2025 16:20:09 -0400 Subject: feat: responsive priority nav --- static/desktop.css | 2 -- static/nav.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ templates/base.html | 19 +++++++++++-------- templates/styles.css | 3 ++- 4 files changed, 62 insertions(+), 11 deletions(-) create mode 100644 static/nav.js 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); diff --git a/templates/base.html b/templates/base.html index a3ae28f..cff513b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -40,15 +40,16 @@

@@ -81,6 +82,8 @@

+ + diff --git a/templates/styles.css b/templates/styles.css index 2a83280..c18d25c 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -34,8 +34,9 @@ body { nav { display: flex; + flex-wrap: wrap; background-color: white; - flex-direction: column-reverse; + position: fixed; } nav img { -- cgit v1.2.3