mobile: hamburger drawer (right-side slide-out)
≤480px gets a hamburger button in the topbar and a fixed slide-out panel from the right edge (width min(82vw, 320px)). The topbar keeps only brand + tone toggle + hamburger visible; nav and the header-right widgets (theme, lang, user menu, version meta) move into the drawer. Markup change: nav and .header-right are now wrapped in .mobile-drawer, which is display:contents on desktop (no layout effect) and a fixed translateX panel on mobile. The user-menu dropdown chip hides on mobile and its links surface flat inside the drawer. JS: ~50 lines of vanilla. Tap hamburger / backdrop / ESC / swipe- right-on-drawer all close. Clicking a nav link inside the drawer closes it after the navigation kicks off so the panel doesn't linger on the next page. CSS: per-file @media block at the bottom of layout.css per the agreed-upon organisation.
This commit is contained in:
parent
4c1793e4e9
commit
2b3ea33884
2 changed files with 292 additions and 45 deletions
|
|
@ -207,57 +207,78 @@
|
|||
<header class="app-header">
|
||||
<a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
|
||||
{% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
|
||||
<nav>
|
||||
<a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
|
||||
<a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
|
||||
<a href="/log" class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
|
||||
role="group" aria-label="Explanation level">
|
||||
<button type="button" data-value="NOVICE"
|
||||
onclick="cassandraSetTone('NOVICE')">Novice</button>
|
||||
<button type="button" data-value="INTERMEDIATE"
|
||||
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
|
||||
</div>
|
||||
<button class="theme-toggle" type="button" aria-label="Toggle theme"
|
||||
onclick="cassandraToggleTheme()">
|
||||
<span class="theme-toggle__label"></span>
|
||||
</button>
|
||||
{% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
|
||||
{% if cu and cu.user %}
|
||||
<div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"
|
||||
role="group" aria-label="AI output language"
|
||||
title="Language the AI uses for the log, digest and portfolio commentary">
|
||||
<button type="button" data-value="en"
|
||||
onclick="cassandraSetLang('en')">EN</button>
|
||||
<button type="button" data-value="it"
|
||||
onclick="cassandraSetLang('it')">IT</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if cu and (cu.user or cu.is_admin) %}
|
||||
<div class="user-menu">
|
||||
<button type="button" id="user-menu-toggle" class="user-chip"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
{% if cu.user %}{{ cu.user.email }}{% else %}admin{% endif %}
|
||||
<span class="user-menu__caret">▾</span>
|
||||
|
||||
{# Tone toggle is the one widget we keep visible in the mobile
|
||||
header even when the drawer is closed — it directly affects the
|
||||
readability of the content right next to it. #}
|
||||
<div id="tone-toggle" class="tone-toggle tone-toggle--header" data-tone="INTERMEDIATE"
|
||||
role="group" aria-label="Explanation level">
|
||||
<button type="button" data-value="NOVICE"
|
||||
onclick="cassandraSetTone('NOVICE')">Novice</button>
|
||||
<button type="button" data-value="INTERMEDIATE"
|
||||
onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
|
||||
</div>
|
||||
|
||||
{# Mobile hamburger — shown only at ≤480px via CSS. #}
|
||||
<button type="button" id="drawer-toggle" class="drawer-toggle"
|
||||
aria-label="Open menu" aria-controls="mobile-drawer" aria-expanded="false">
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
<span class="drawer-toggle__bar"></span>
|
||||
</button>
|
||||
|
||||
{# Wrapper: display:contents on desktop (zero layout effect), fixed
|
||||
slide-out panel on mobile. Holds nav + header-right widgets. #}
|
||||
<div id="mobile-drawer" class="mobile-drawer">
|
||||
<nav>
|
||||
<a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Dashboard</a>
|
||||
<a href="/news" class="{% if request.url.path == '/news' %}active{% endif %}">News</a>
|
||||
<a href="/log" class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
|
||||
</nav>
|
||||
<div class="header-right">
|
||||
<button class="theme-toggle" type="button" aria-label="Toggle theme"
|
||||
onclick="cassandraToggleTheme()">
|
||||
<span class="theme-toggle__label"></span>
|
||||
</button>
|
||||
<div id="user-menu" class="user-menu__panel" role="menu" hidden>
|
||||
{% if cu.user %}
|
||||
<a href="/settings" role="menuitem" class="user-menu__item">Settings</a>
|
||||
{% endif %}
|
||||
<a href="/pricing" role="menuitem" class="user-menu__item">Pricing</a>
|
||||
<a href="/terms" role="menuitem" class="user-menu__item">Terms</a>
|
||||
<a href="/privacy" role="menuitem" class="user-menu__item">Privacy</a>
|
||||
<a href="/disclaimer" role="menuitem" class="user-menu__item">Disclaimer</a>
|
||||
<a href="/logout" role="menuitem" class="user-menu__item">Logout</a>
|
||||
{% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
|
||||
{% if cu and cu.user %}
|
||||
<div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"
|
||||
role="group" aria-label="AI output language"
|
||||
title="Language the AI uses for the log, digest and portfolio commentary">
|
||||
<button type="button" data-value="en"
|
||||
onclick="cassandraSetLang('en')">EN</button>
|
||||
<button type="button" data-value="it"
|
||||
onclick="cassandraSetLang('it')">IT</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if cu and (cu.user or cu.is_admin) %}
|
||||
<div class="user-menu">
|
||||
<button type="button" id="user-menu-toggle" class="user-chip"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
{% if cu.user %}{{ cu.user.email }}{% else %}admin{% endif %}
|
||||
<span class="user-menu__caret">▾</span>
|
||||
</button>
|
||||
<div id="user-menu" class="user-menu__panel" role="menu" hidden>
|
||||
{% if cu.user %}
|
||||
<a href="/settings" role="menuitem" class="user-menu__item">Settings</a>
|
||||
{% endif %}
|
||||
<a href="/pricing" role="menuitem" class="user-menu__item">Pricing</a>
|
||||
<a href="/terms" role="menuitem" class="user-menu__item">Terms</a>
|
||||
<a href="/privacy" role="menuitem" class="user-menu__item">Privacy</a>
|
||||
<a href="/disclaimer" role="menuitem" class="user-menu__item">Disclaimer</a>
|
||||
<a href="/logout" role="menuitem" class="user-menu__item">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="meta">v0.1 · UTC</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="meta">v0.1 · UTC</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{# Drawer backdrop. Hidden by default; CSS shows it when
|
||||
body.drawer-open is set. Click closes the drawer. #}
|
||||
<div id="drawer-backdrop" class="drawer-backdrop" hidden></div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var btn = document.getElementById('user-menu-toggle');
|
||||
|
|
@ -278,6 +299,56 @@
|
|||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Mobile drawer (hamburger → right-side slide-out panel). The CSS
|
||||
// gates visibility of #drawer-toggle to ≤480px, so on desktop this
|
||||
// wiring is harmless — the click handler is attached but nobody
|
||||
// can fire it.
|
||||
(function () {
|
||||
var btn = document.getElementById('drawer-toggle');
|
||||
var drawer = document.getElementById('mobile-drawer');
|
||||
var backdrop = document.getElementById('drawer-backdrop');
|
||||
if (!btn || !drawer || !backdrop) return;
|
||||
function open() {
|
||||
document.body.classList.add('drawer-open');
|
||||
backdrop.hidden = false;
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
function close() {
|
||||
document.body.classList.remove('drawer-open');
|
||||
backdrop.hidden = true;
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
btn.addEventListener('click', function () {
|
||||
if (document.body.classList.contains('drawer-open')) close(); else open();
|
||||
});
|
||||
backdrop.addEventListener('click', close);
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && document.body.classList.contains('drawer-open')) close();
|
||||
});
|
||||
// Swipe-right inside the drawer closes — small native feel.
|
||||
// Tracks pointer down then up; if the user moves >40px right
|
||||
// and stays within 60° of horizontal, treat as a close gesture.
|
||||
var startX = null, startY = null;
|
||||
drawer.addEventListener('pointerdown', function (e) {
|
||||
if (!document.body.classList.contains('drawer-open')) return;
|
||||
startX = e.clientX; startY = e.clientY;
|
||||
});
|
||||
drawer.addEventListener('pointerup', function (e) {
|
||||
if (startX === null) return;
|
||||
var dx = e.clientX - startX;
|
||||
var dy = Math.abs(e.clientY - startY);
|
||||
startX = startY = null;
|
||||
if (dx > 40 && dy < dx * 0.6) close();
|
||||
});
|
||||
// If a nav link inside the drawer is clicked, close after the
|
||||
// navigation kicks off so the panel doesn't linger on the next page.
|
||||
drawer.addEventListener('click', function (e) {
|
||||
if (e.target.tagName === 'A') close();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<main class="app-main">
|
||||
{% block main %}{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue