Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Fold the mobile header into a single hamburger menu (#119)

Browse source 
On phones the header spanned two rows: the title block plus a control bar of
the °F/°C toggle, bell, account and hamburger. Wrap the nav in a .nav-panel
inside the <details> menu and inject the °F/°C toggle and account/bell into that
panel instead of into the header row. On desktop the panel is display:contents,
so the inline top bar renders exactly as before (order restored via flex order);
on phones the panel becomes a right-anchored, viewport-clamped dropdown and the
header collapses to a single row (logo + name + hamburger, tagline hidden).

The viewport clamp also fixes the SEO/city pages, whose menu dropdown previously
ran off-screen.
This commit is contained in:
Emi Griffith 2026-07-16 05:15:00 -07:00 committed by GitHub
parent 31f68981a0
commit f86100015d
1 changed files with 2 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/base.html.j2
View file

@ -33,12 +33,14 @@
</div> </div>
<details class="nav-menu"> <details class="nav-menu">
<summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary> <summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary>
<div class="nav-panel">
<nav class="view-nav" aria-label="Views"> <nav class="view-nav" aria-label="Views">
<a href="{{ base }}/">Weekly</a> <a href="{{ base }}/">Weekly</a>
<a href="{{ base }}/calendar">Calendar</a> <a href="{{ base }}/calendar">Calendar</a>
<a href="{{ base }}/compare">Compare</a> <a href="{{ base }}/compare">Compare</a>
<a href="{{ base }}/climate"{% if section == 'climate' %} class="active"{% endif %}>Climate</a> <a href="{{ base }}/climate"{% if section == 'climate' %} class="active"{% endif %}>Climate</a>
</nav> </nav>
</div>
</details> </details>
</div> </div>
</header> </header>