diff options
| -rw-r--r-- | static/desktop.css | 2 | ||||
| -rw-r--r-- | static/nav.js | 49 | ||||
| -rw-r--r-- | templates/base.html | 19 | ||||
| -rw-r--r-- | templates/styles.css | 3 |
4 files changed, 62 insertions, 11 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); 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 @@ <body> <nav> - <a href="/#contact">Contact</a> - <a href="/#reviews">Reviews</a> - <a href="/about">Team</a> - <a href="/policies">Policies</a> - <a href="/posts">Posts</a> - <a href="/#help">Helpful Links</a> - <a href="/brochure">Brochure</a> - <a href="/#offerings">Services</a> <a href="/#"><img alt="logo" src="/assets/logo-simple.png" /></a> + <a href="/#offerings">Services</a> + <a href="/brochure">Brochure</a> + <a href="/#help">Helpful Links</a> + <a href="/posts">Posts</a> + <a href="/policies">Policies</a> + <a href="/about">Team</a> + <a href="/#reviews">Reviews</a> + <a href="/#contact">Contact</a> + <a href="#">More…</a> </nav> <main> @@ -81,6 +82,8 @@ </a> </p> </footer> + + <script src="/nav.js"></script> </body> </html> 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 { |