mAi
bd600633c9
Phase 5g slice B. Fills the ≤767px gap left by slice A (sidebar
display:none on mobile) with a fixed-bottom 5-slot nav + a drawer for
overflow items. iOS PWA install respects safe-area-inset-bottom so the
nav clears the home indicator.
web/templates/layout.tmpl:
- New <nav class="projax-bottom-nav"> with five slots:
Tree (/) → Dashboard (/dashboard) → +New (/new, raised circle)
→ Calendar (/calendar) → Menu (drawer).
- Center "+ New" slot is a raised .capture-circle (margin-top: -10px,
44×44px, accent background) — mBrian's capture-button pattern, but
pointing at /new because projax has no separate capture flow.
- Menu slot is a <details class="projax-mobile-drawer"> whose <summary>
IS the bottom-nav-item. Tapping pops a drawer-sheet absolutely
positioned 8px above the bottom-nav with overflow items: Timeline,
Graph, Admin, theme toggle, sign-out. Browser-default <details>
handles open/close + tap-outside-dismiss — no JS, no gesture wiring.
- Active class on bottom-nav-item + drawer-item via same .Path-driven
server-side pattern slice A introduced.
- Theme toggle handler now binds to BOTH #theme-toggle (sidebar) AND
#theme-toggle-drawer (drawer). Flipping either updates the icon on
both buttons, sets data-theme on <html>, writes the cookie.
web/static/style.css:
- .projax-bottom-nav: fixed bottom, height = calc(56px +
env(safe-area-inset-bottom, 0)), flex justify-around, z-index 1021.
- .bottom-nav-item: 44×44px min, column-flex, touch-action: none for the
capture-button so iOS doesn't intercept the tap.
- .capture-circle: 44×44px raised circle, accent background.
- .projax-mobile-drawer .drawer-sheet: fixed, bottom-right anchored
above the nav, min(260px, calc(100vw - 16px)) wide, slide-up animation
via @keyframes projax-drawer-up (translateY 8→0, 160ms ease-out).
- @media (min-width: 768px): bottom-nav hidden.
- @media (max-width: 767px): main.projax-main gets padding-bottom =
calc(56px + 1rem + env(safe-area-inset-bottom)) so rows aren't hidden
behind the nav.
docs/design.md:
- New §18 (Layout: sidebar + bottom-nav, Phase 5g). Documents both
surfaces' breakpoints, the .Path-driven active marker, the pre-paint
localStorage restore, the theme-toggle dual-binding, and the four
features I deliberately did not port from mBrian (resize handle,
capture modal, quick-switcher/saved-searches/Today/Work, slide-up
gesture).
Tests (web/layout_test.go):
- TestLayoutBottomNavMarkup: 5 slots present in documented order, +New
is .capture-btn with .capture-circle, Menu is <details>, drawer holds
Timeline/Graph/Admin/theme/sign-out.
- TestLayoutBottomNavActiveClass: /calendar render highlights Calendar
slot only.
- TestLayoutThemeToggleBoundToBothButtons: handler enumerates both
button ids so flipping either flips the theme.
All 10 layout tests pass (7 from slice A + 3 from slice B). Full web
suite green. No test source edits to pre-existing tests — the bottom-
nav is additive markup.
248 lines
15 KiB
Cheetah
248 lines
15 KiB
Cheetah
{{define "layout"}}<!doctype html>
|
|
<html lang="en" data-theme="{{.Theme}}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="{{.ThemeColor}}">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="projax">
|
|
<title>{{.Title}} — projax</title>
|
|
<link rel="manifest" href="/static/manifest.webmanifest">
|
|
<link rel="apple-touch-icon" href="/static/icon-192.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png">
|
|
<link rel="icon" type="image/png" sizes="512x512" href="/static/icon-512.png">
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script>
|
|
// Phase 5g — restore sidebar collapsed state BEFORE first paint so the
|
|
// main-content margin doesn't flash from 220px→56px on every navigation.
|
|
// Mirrors layout.tmpl's existing theme-cookie approach (server-rendered
|
|
// first paint, no FOUC) but localStorage-backed because collapse state
|
|
// doesn't need to round-trip the server.
|
|
(function() {
|
|
try {
|
|
if (localStorage.getItem('projax.sidebar.collapsed') === 'true') {
|
|
document.documentElement.setAttribute('data-sidebar-collapsed', 'true');
|
|
}
|
|
} catch (e) { /* private mode / disabled storage — fall through */ }
|
|
})();
|
|
</script>
|
|
<script>
|
|
// Phase 3j — register the service worker post-load so the install
|
|
// affordance fires and shell assets warm into cache. Failures are silent
|
|
// (older browsers, http context, etc.) — projax must work without SW.
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', function() {
|
|
navigator.serviceWorker.register('/static/sw.js').catch(function(){});
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
{{$path := .Path}}
|
|
<aside class="projax-sidebar" aria-label="Primary navigation">
|
|
<div class="sidebar-top">
|
|
<a href="/" class="brand" title="projax">
|
|
<span class="brand-icon" aria-hidden="true">▦</span>
|
|
<strong class="brand-label">projax</strong>
|
|
</a>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<a href="/" class="nav-item{{if eq $path "/"}} active{{end}}" title="Tree">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
|
|
<line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
|
|
</svg>
|
|
<span class="nav-label">Tree</span>
|
|
</a>
|
|
<a href="/dashboard" class="nav-item{{if eq $path "/dashboard"}} active{{end}}" title="Dashboard">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>
|
|
</svg>
|
|
<span class="nav-label">Dashboard</span>
|
|
</a>
|
|
<a href="/calendar" class="nav-item{{if eq $path "/calendar"}} active{{end}}" title="Calendar">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
<span class="nav-label">Calendar</span>
|
|
</a>
|
|
<a href="/timeline" class="nav-item{{if eq $path "/timeline"}} active{{end}}" title="Timeline">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span class="nav-label">Timeline</span>
|
|
</a>
|
|
<a href="/graph" class="nav-item{{if eq $path "/graph"}} active{{end}}" title="Graph">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
|
</svg>
|
|
<span class="nav-label">Graph</span>
|
|
</a>
|
|
<a href="/admin" class="nav-item{{if eq $path "/admin"}} active{{end}}" title="Admin">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
<span class="nav-label">Admin</span>
|
|
</a>
|
|
</nav>
|
|
<div class="sidebar-bottom">
|
|
<button type="button" id="theme-toggle" class="nav-item theme-toggle"
|
|
title="Toggle dark / light" aria-label="Toggle theme" data-theme="{{.Theme}}">
|
|
<span class="nav-icon theme-icon" aria-hidden="true">{{if eq .Theme "light"}}☾{{else}}☀{{end}}</span>
|
|
<span class="nav-label">Theme</span>
|
|
</button>
|
|
<form method="post" action="/logout" class="logout-form">
|
|
<button type="submit" class="nav-item logout-item" title="Sign out">
|
|
<svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
<span class="nav-label">Sign out</span>
|
|
</button>
|
|
</form>
|
|
<button type="button" id="sidebar-collapse" class="nav-item collapse-btn"
|
|
title="Collapse sidebar" aria-label="Collapse sidebar" aria-expanded="true">
|
|
<svg class="nav-icon collapse-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
<span class="nav-label">Collapse</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<main class="projax-main">
|
|
{{template "content" .}}
|
|
</main>
|
|
<nav class="projax-bottom-nav" aria-label="Mobile navigation">
|
|
<a href="/" class="bottom-nav-item{{if eq $path "/"}} active{{end}}" aria-label="Tree">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true">
|
|
<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/>
|
|
<line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
|
|
</svg>
|
|
<span>Tree</span>
|
|
</a>
|
|
<a href="/dashboard" class="bottom-nav-item{{if eq $path "/dashboard"}} active{{end}}" aria-label="Dashboard">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true">
|
|
<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>
|
|
</svg>
|
|
<span>Dash</span>
|
|
</a>
|
|
<a href="/new" class="bottom-nav-item capture-btn" aria-label="New item">
|
|
<span class="capture-circle">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" width="22" height="22" aria-hidden="true">
|
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<a href="/calendar" class="bottom-nav-item{{if eq $path "/calendar"}} active{{end}}" aria-label="Calendar">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
<span>Cal</span>
|
|
</a>
|
|
<details class="projax-mobile-drawer">
|
|
<summary class="bottom-nav-item drawer-toggle" aria-label="More — Timeline, Graph, Admin">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22" aria-hidden="true">
|
|
<line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>
|
|
</svg>
|
|
<span>Menu</span>
|
|
</summary>
|
|
<div class="drawer-sheet" role="menu">
|
|
<a href="/timeline" class="drawer-item{{if eq $path "/timeline"}} active{{end}}" role="menuitem">
|
|
<svg class="drawer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
|
|
</svg>
|
|
<span>Timeline</span>
|
|
</a>
|
|
<a href="/graph" class="drawer-item{{if eq $path "/graph"}} active{{end}}" role="menuitem">
|
|
<svg class="drawer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
|
</svg>
|
|
<span>Graph</span>
|
|
</a>
|
|
<a href="/admin" class="drawer-item{{if eq $path "/admin"}} active{{end}}" role="menuitem">
|
|
<svg class="drawer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
<span>Admin</span>
|
|
</a>
|
|
<button type="button" id="theme-toggle-drawer" class="drawer-item" aria-label="Toggle theme" data-theme="{{.Theme}}">
|
|
<span class="drawer-icon theme-icon" aria-hidden="true">{{if eq .Theme "light"}}☾{{else}}☀{{end}}</span>
|
|
<span>Theme</span>
|
|
</button>
|
|
<form method="post" action="/logout" class="drawer-form">
|
|
<button type="submit" class="drawer-item drawer-logout">
|
|
<svg class="drawer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
|
|
</svg>
|
|
<span>Sign out</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</details>
|
|
</nav>
|
|
<script>
|
|
// Phase 4b — theme toggle. Writes the projax_theme cookie (1-year Max-Age,
|
|
// Path=/, SameSite=Lax) and flips data-theme + theme-color in place so the
|
|
// user sees the swap without a reload. Server already injected the initial
|
|
// value from the cookie, so first paint never flashes the wrong theme.
|
|
// Phase 5g — same handler binds to BOTH the sidebar button (desktop) and
|
|
// the drawer button (mobile menu) so either surface flips the theme
|
|
// identically.
|
|
(function() {
|
|
var btns = [
|
|
document.getElementById('theme-toggle'),
|
|
document.getElementById('theme-toggle-drawer'),
|
|
].filter(Boolean);
|
|
if (btns.length === 0) return;
|
|
var root = document.documentElement;
|
|
var meta = document.querySelector('meta[name="theme-color"]');
|
|
var themeColors = { dark: '#161616', light: '#f0efe8' };
|
|
function flip() {
|
|
var current = root.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
|
|
var next = current === 'light' ? 'dark' : 'light';
|
|
root.setAttribute('data-theme', next);
|
|
btns.forEach(function(b) {
|
|
b.setAttribute('data-theme', next);
|
|
var ic = b.querySelector('.theme-icon');
|
|
if (ic) ic.textContent = next === 'light' ? '☾' : '☀';
|
|
});
|
|
if (meta) meta.setAttribute('content', themeColors[next]);
|
|
var oneYear = 60 * 60 * 24 * 365;
|
|
document.cookie = 'projax_theme=' + next + '; Max-Age=' + oneYear + '; Path=/; SameSite=Lax';
|
|
}
|
|
btns.forEach(function(b) { b.addEventListener('click', flip); });
|
|
})();
|
|
</script>
|
|
<script>
|
|
// Phase 5g — sidebar collapse toggle. State persists in localStorage; the
|
|
// pre-paint script in <head> already restored data-sidebar-collapsed on
|
|
// <html>, so this handler only writes the new state. Aria-expanded
|
|
// tracks the open/closed state for screen readers.
|
|
(function() {
|
|
var btn = document.getElementById('sidebar-collapse');
|
|
if (!btn) return;
|
|
var root = document.documentElement;
|
|
function sync() {
|
|
var collapsed = root.getAttribute('data-sidebar-collapsed') === 'true';
|
|
btn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
|
|
btn.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
|
|
btn.setAttribute('aria-label', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
|
|
}
|
|
sync();
|
|
btn.addEventListener('click', function() {
|
|
var collapsed = root.getAttribute('data-sidebar-collapsed') === 'true';
|
|
var next = !collapsed;
|
|
if (next) root.setAttribute('data-sidebar-collapsed', 'true');
|
|
else root.removeAttribute('data-sidebar-collapsed');
|
|
try { localStorage.setItem('projax.sidebar.collapsed', next ? 'true' : 'false'); } catch (e) {}
|
|
sync();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>{{end}}
|