From 576fd3912c6a38ffc156c666874431a78faf9476 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Mon, 24 Mar 2025 23:22:09 -0400 Subject: feat: collapsible nav menu --- static/desktop.css | 8 ++++++++ templates/base.html | 31 ++++++++++++++++++++++--------- templates/styles.css | 21 +++++++++++++++++++-- 3 files changed, 49 insertions(+), 11 deletions(-) diff --git a/static/desktop.css b/static/desktop.css index 1b0eb43..88d04d5 100644 --- a/static/desktop.css +++ b/static/desktop.css @@ -12,6 +12,14 @@ width: 100%; } + nav div { + height: auto; + } + + a#menu-toggle { + display: none; + } + div.buttons { flex-direction: row-reverse; } diff --git a/templates/base.html b/templates/base.html index a3ae28f..2c6b9aa 100644 --- a/templates/base.html +++ b/templates/base.html @@ -40,15 +40,19 @@
@@ -81,6 +85,15 @@

+ + diff --git a/templates/styles.css b/templates/styles.css index 2a83280..63cef43 100644 --- a/templates/styles.css +++ b/templates/styles.css @@ -34,8 +34,16 @@ body { nav { display: flex; + flex-direction: row-reverse; background-color: white; - flex-direction: column-reverse; +} + +nav div { + display: flex; + flex-direction: row; + overflow: hidden; + flex-wrap: wrap; + height: 3em; } nav img { @@ -53,7 +61,16 @@ nav a { nav a:hover { color: var(--darkteal); - background-color: lightgray; +} + +a#menu-toggle { + cursor: pointer; +} + +nav div.menu-open { + height: auto; + flex-wrap: off; + flex-direction: column; } div.buttons { -- cgit v1.2.3