From 8f051edf92ff1b6217605261f1a36ebdfae28977 Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Mon, 14 Apr 2025 13:41:00 +1200
Subject: [PATCH] Show full navigation on mobile

---
 public/style.css        | 20 +++++++++++++++++++-
 pug/home.pug            |  4 ++--
 pug/includes/layout.pug | 30 +++++++-----------------------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/public/style.css b/public/style.css
index f6adc80..cb5db66 100644
--- a/public/style.css
+++ b/public/style.css
@@ -34,12 +34,30 @@
 .s-navigation__toggle.s-navigation {
 	--_na-item-bg: var(--black-150);
 }
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 700px) {
 	.s-navigation__toggle.s-navigation .is-selected svg {
 		visibility: hidden;
 		width: 0;
 	}
 }
+@media screen and (max-width: 640px) {
+	.s-navigation {
+		/* styles from s-navigation__sm */
+		--_na-item-fs: var(--fs-caption);
+		--_na-item-p: var(--su4) var(--su12);
+	}
+}
+.s-topbar {
+	/* support variable height topbar */
+	height: auto;
+	min-height: var(--_tb-h);
+	align-items: stretch;
+}
+@media screen and (max-width: 470px) {
+	.shape-nav {
+		display: none;
+	}
+}
 .duration-last-col td:last-child {
 	text-align: right;
 	white-space: pre;
diff --git a/pug/home.pug b/pug/home.pug
index 2a22e87..4f3507c 100644
--- a/pug/home.pug
+++ b/pug/home.pug
@@ -11,8 +11,8 @@ html
     meta(name="htmx-config" content='{"requestClass":"is-loading"}')
   body.themed.theme-system.overflow-y-scroll
     header.s-topbar.ps-sticky.t0
-      .s-topbar--container.wmx9
-          .s-topbar--logo
+      .s-topbar--container.wmx9.h-auto
+          .s-topbar--logo.h-auto.as-stretch
             != icons.get("compass-solid", 24)
             .ml6 BC Explorer
 
diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug
index 672be9c..9a3deb1 100644
--- a/pug/includes/layout.pug
+++ b/pug/includes/layout.pug
@@ -31,13 +31,14 @@ html
   body.themed.theme-system.overflow-y-scroll(hx-boost="true" hx-swap="outerHTML" hx-target="#page" hx-select="#page")
     #page(hx-history-elt)
       header.s-topbar.ps-sticky.t0
-        .s-topbar--container.wmx9
-          button.s-topbar--logo.s-btn.s-btn__muted.s-btn__dropdown.pr24.bar0.fc-black(popovertarget="menu")
+        .s-topbar--container.wmx9.h-auto
+          button.s-topbar--logo.h-auto.as-stretch.s-btn.s-btn__muted.s-btn__dropdown.pr24.bar0.fc-black(popovertarget="menu")
             != icons.get("compass-solid", 24)
-            .ml6 BC Explorer
+            .ml6(class="md:d-none") BC Explorer
           #menu(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible.px0.py8
             .s-popover--arrow.s-popover--arrow__tc
             ul.s-menu(role="menu")
+              li.s-menu--title.d-none(class="md:d-block") BC Explorer
               li(role="menuitem")
                 a.s-block-link.d-flex.ai-center.fc-black(href="/" hx-boost="false")
                   != icons.get("log-out")
@@ -85,8 +86,8 @@ html
                       each currency in currencies
                         option(selected=(currency === count.displayCurrency))= currency
           .fl-grow1
-          nav.d-block(class="md:d-none")
-            ul.s-navigation
+          nav.d-block
+            ul.s-navigation(class="sm:d-grid sm:grid__3")
               li: +navi("arrange", "album", "album", "Album")
               li: +navi("arrange", "artist", "people-tag", "Artist")
               li: +navi("arrange", "label", "flower", "Label")
@@ -97,25 +98,8 @@ html
                 a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
                   != icons.get("graph-up")
                   span.ml4 Stats
-          ul.s-navigation.s-navigation__toggle.d-none(class="md:d-block")
-            button.s-navigation--item.s-navigation--item__dropdown(popovertarget="arranges")
-              != icons.get("lens")
-              span.ml4 Arrange
-          #arranges(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible
-            .s-popover--arrow.s-popover--arrow__tc
-            ul.s-navigation.s-navigation__vertical
-              li: +navi("arrange", "album", "album", "Album")
-              li: +navi("arrange", "artist", "people-tag", "Artist")
-              li: +navi("arrange", "label", "flower", "Label")
-              li: +navi("arrange", "tag", "label", "Tag")
-              li: +navi("arrange", "track", "music-note", "Track")
-              li
-                a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
-                  != icons.get("graph-up")
-                  span.ml4 Stats
           if !isStatsPage
-            .px16(class="md:px4")
-            nav
+            nav.shape-nav.pl32(class="md:pl8")
               ul.s-navigation.s-navigation__toggle.g0
                 li: +navi("shape", "grid").brr0!= icons.get("view-grid")
                 li: +navi("shape", "list").blr0!= icons.get("align-justify")