Skip to content

Replace nav dropdown with slide-in SiteNavPanel overlay #140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hawkandheron-dev merged 2 commits into from
Apr 25, 2026
Merged

Replace nav dropdown with slide-in SiteNavPanel overlay #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4cc409
Suppress loader on return visits; add shared top nav
claude Apr 24, 2026
cc77cfe
Replace CH Timeline dropdown with left slide-in nav panel
claude Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand Down
8 changes: 8 additions & 0 deletions church-history-supabase.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand Down
10 changes: 9 additions & 1 deletion design-system.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand All @@ -23,7 +31,7 @@
<div id="page-loader" class="page-loader" role="progressbar" aria-label="Loading page" aria-busy="true">
<div class="page-loader-inner">
<img class="page-loader-logo" src="resources/logos/Windhover_BLK.png" alt="" width="120" height="120" />
<h2 class="page-loader-title">Design System</h2>
<h2 class="page-loader-title">Design system</h2>
<div class="page-loader-sub">Loading</div>
<div class="page-loader-cta">
<div class="page-loader-bar" aria-hidden="true"></div>
Expand Down
20 changes: 15 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,20 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Loader: inline critical styles so the overlay paints on first byte,
before loader.css arrives. Remaining styles are in loader.css. -->
before loader.css arrives. Remaining styles are in loader.css.
The sync gate below suppresses the overlay for returning visitors
within the same browser session (see loader.js for details). -->
<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand Down Expand Up @@ -57,12 +67,12 @@ <h1 class="hero-title">Windhover</h1>
</header>

<nav class="landing-nav" aria-label="Tools">
<a class="button landing-nav-link" href="apps/index.html">Timeline</a>
<a class="button landing-nav-link" href="apps/church-history-timeline.html">Church history timeline</a>
<a class="button landing-nav-link" href="pantheons-supabase.html">Pantheons Database</a>
<a class="button landing-nav-link" href="pantheons-supabase.html">Pantheons database</a>
<a class="button landing-nav-link" href="apps/biblical-places.html">Biblical history atlas</a>
<a class="button landing-nav-link admin-only" href="apps/african-kingdoms.html" style="display:none;">African Kingdoms</a>
<a class="button landing-nav-link admin-only" href="design-system.html" style="display:none;">Design System</a>
<a class="button landing-nav-link admin-only" href="apps/african-kingdoms.html" style="display:none;">African kingdoms</a>
<a class="button landing-nav-link admin-only" href="design-system.html" style="display:none;">Design system</a>
<a class="button landing-nav-link" href="apps/index.html">Timeline component</a>
</nav>

<footer class="site-footer">
Expand Down
19 changes: 19 additions & 0 deletions loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@
'use strict';

var HARD_TIMEOUT_MS = 5000;
var SEEN_KEY = 'windhover.loaderSeen';

function hasSeen() {
try { return sessionStorage.getItem(SEEN_KEY) === '1'; }
catch (_) { return false; }
}

function markSeen() {
try { sessionStorage.setItem(SEEN_KEY, '1'); }
catch (_) {}
}

function prefersReducedMotion() {
return !!(window.matchMedia &&
Expand All @@ -43,6 +54,13 @@
var loader = document.getElementById('page-loader');
if (!loader) return;

// Returning visitor within the same session: skip the overlay entirely.
if (hasSeen()) {
loader.setAttribute('hidden', '');
loader.setAttribute('aria-hidden', 'true');
return;
}

document.documentElement.style.overflow = 'hidden';

var enterBtn = loader.querySelector('.page-loader-enter');
Expand All @@ -52,6 +70,7 @@
function dismiss() {
if (dismissed) return;
dismissed = true;
markSeen();

loader.classList.add('is-leaving');
loader.setAttribute('aria-hidden', 'true');
Expand Down
10 changes: 9 additions & 1 deletion pantheons-supabase.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand All @@ -24,7 +32,7 @@
<div id="page-loader" class="page-loader" role="progressbar" aria-label="Loading page" aria-busy="true">
<div class="page-loader-inner">
<img class="page-loader-logo" src="resources/logos/Windhover_BLK.png" alt="" width="120" height="120" />
<h2 class="page-loader-title">Pantheons Database</h2>
<h2 class="page-loader-title">Pantheons database</h2>
<div class="page-loader-sub">Loading</div>
<div class="page-loader-cta">
<div class="page-loader-bar" aria-hidden="true"></div>
Expand Down
8 changes: 8 additions & 0 deletions pantheons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,17 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<script>
try {
if (sessionStorage.getItem('windhover.loaderSeen') === '1') {
document.documentElement.setAttribute('data-loader-seen', '');
}
} catch (_) {}
</script>
<style>
#page-loader{position:fixed;inset:0;z-index:9999;background:#f5f0e1;display:flex;align-items:center;justify-content:center}
#page-loader[hidden]{display:none!important}
html[data-loader-seen] #page-loader{display:none!important}
</style>
<link rel="stylesheet" href="loader.css" />
<script defer src="loader.js"></script>
Expand Down
55 changes: 7 additions & 48 deletions timeline-scratch/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,16 @@ body {
}

.header-left > *,
.header-right > * {
.header-right > *,
.header-content > .site-nav-toggle {
pointer-events: auto;
}

/* Hamburger that opens the SiteNavPanel — sits left of the search bar. */
.site-nav-toggle {
flex-shrink: 0;
}

.header-left {
flex: 1;
min-width: 0;
Expand Down Expand Up @@ -115,40 +121,6 @@ body {
gap: 8px;
}

/* Navigation dropdown menu */
.nav-dropdown {
position: relative;
}

.nav-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 160px;
background: var(--color-parchment-light, var(--color-parchment-light));
backdrop-filter: blur(10px);
border: 1px solid var(--color-border-hover, rgba(120, 100, 70, 0.5));
border-radius: var(--radius-md, 12px);
box-shadow: 0 4px 16px rgba(60, 50, 30, 0.2);
overflow: hidden;
z-index: 200;
}

.nav-dropdown-item {
display: block;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
color: var(--color-ink, var(--color-ink));
text-decoration: none;
transition: background 0.1s ease;
}

.nav-dropdown-item:hover {
background: rgba(120, 100, 70, 0.1);
}

.tab-content {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -273,19 +245,6 @@ body {
color: #f0ebe0;
}

.nav-dropdown-menu {
background: rgba(30, 27, 22, 0.95);
border-color: rgba(58, 53, 40, 0.6);
}

.nav-dropdown-item {
color: #f0ebe0;
}

.nav-dropdown-item:hover {
background: rgba(200, 180, 140, 0.1);
}

.subtitle {
color: #a09888;
}
Expand Down
48 changes: 17 additions & 31 deletions timeline-scratch/src/ChurchHistoryApp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,14 @@
import { useState, useRef, useCallback, useEffect } from 'react';
import { useState, useRef, useCallback } from 'react';
import { Timeline } from './components/Timeline/Timeline.jsx';
import { TimelineSearch } from './components/Timeline/components/TimelineSearch.jsx';
import { Icon } from './components/Timeline/components/Icon.jsx';
import { SiteNavPanel } from './components/SiteNavPanel.jsx';
import { churchHistoryData, churchHistoryConfig } from './data/churchHistoryData.js';
import './App.css';

function NavDropdown() {
const [open, setOpen] = useState(false);
const ref = useRef(null);

useEffect(() => {
if (!open) return;
const handler = (e) => {
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [open]);

return (
<div className="nav-dropdown" ref={ref}>
<button className="btn btn-icon nav-dropdown-toggle" onClick={() => setOpen(!open)} title="Navigation">
<Icon name="menu" size={18} />
</button>
{open && (
<div className="nav-dropdown-menu">
<a href="../../index.html" className="nav-dropdown-item" onClick={() => setOpen(false)}>Home</a>
<a href="./church-history-timeline.html" className="nav-dropdown-item" onClick={() => setOpen(false)}>Live Version</a>
<a href="../../church-history-supabase.html" className="nav-dropdown-item" onClick={() => setOpen(false)}>Data Browser</a>
</div>
)}
</div>
);
}

function ChurchHistoryApp() {
const timelineRef = useRef(null);
const [navOpen, setNavOpen] = useState(false);

const handleViewportChange = (viewport) => {
console.log('Viewport changed:', viewport);
Expand All @@ -62,6 +35,15 @@ function ChurchHistoryApp() {
<div className="app">
<header className="app-header">
<div className="header-content">
<button
className="btn btn-icon site-nav-toggle"
onClick={() => setNavOpen(true)}
aria-label="Open navigation"
aria-expanded={navOpen}
title="Navigation"
>
<Icon name="menu" size={18} />
</button>
<div className="header-left">
<TimelineSearch
data={churchHistoryData}
Expand All @@ -75,10 +57,14 @@ function ChurchHistoryApp() {
<button className="btn" title="Sign in to save notes, add entries, or make suggestions">Sign In</button>
<button className="btn" title="Sign in to save notes, add entries, or make suggestions">Sign Up</button>
</div>
<NavDropdown />
</div>
</div>
</header>
<SiteNavPanel
open={navOpen}
onClose={() => setNavOpen(false)}
activeKey="church-history"

@chatgpt-codex-connector chatgpt-codex-connector Bot Apr 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Mark only the actual page as current in nav panel

Passing activeKey="church-history" here causes SiteNavPanel to set aria-current="page" on the CH Timeline link, but this component is rendered on church-history.html (the JSON page), not church-history-timeline.html. That means screen readers and visual highlighting report the wrong current page, which is an accessibility and navigation regression introduced by the new active-state logic.

Useful? React with 👍 / 👎.

/>
<div className="tab-content">
<div className="timeline-wrapper">
<Timeline
Expand Down
Loading
Loading