Replace nav dropdown with slide-in SiteNavPanel overlay#140
Conversation
- Loader now dismisses via sessionStorage flag + inline pre-paint gate, so navigating back to a page within the same browser session skips the overlay entirely (fixes the home page re-showing the loader after CH Timeline). - New nav.js injects a single sticky header (brand, primary links, auth slot, hamburger drawer on mobile) on every page, replacing the ad-hoc site-nav / top-nav markup that was duplicated per page. editable-content.js still targets .top-nav inside the header unchanged. - Home landing-nav reordered so Church history timeline is first, and the "Pantheons database", "African kingdoms", "Design system" labels are sentence-cased to match the rest of the site.
- New SiteNavPanel component (timeline-scratch/src/components/) renders a fixed, left-side overlay with a parchment card + backdrop, matching the Tour panel's visual language. Slides in from the left; closes on Escape, backdrop click, close button, or link click. - Hamburger moved from the right side of the header to the far left of .header-content — sits left of the search bar. Replaces the previous right-aligned NavDropdown in both ChurchHistoryApp and ChurchHistorySupabaseApp (including the Suggestions, Getting Started, and no-Clerk view branches). - Panel items: Home, CH Timeline, Pantheons, Biblical atlas, Timeline component (last). Active page highlighted via activeKey prop. - Removed orphaned .nav-dropdown* CSS. - Landing-nav on home: Timeline moved to the bottom and relabelled "Timeline component". - Reverts the earlier site-wide top nav + drawer experiment on the main static pages; loader sessionStorage gating is kept.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cc77cfe6c9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <SiteNavPanel | ||
| open={navOpen} | ||
| onClose={() => setNavOpen(false)} | ||
| activeKey="church-history" |
There was a problem hiding this comment.
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 👍 / 👎.
2 participants
Summary
Replaces the dropdown navigation menu with a new fixed-position slide-in panel (
SiteNavPanel) that appears on the left side of the screen. This provides a more prominent navigation experience with a backdrop overlay and improved accessibility.Key Changes
New
SiteNavPanelcomponent (SiteNavPanel.jsx+SiteNavPanel.css):has()selectorUpdated app components to use new navigation
ChurchHistoryApp.jsx: ReplacedNavDropdownwithSiteNavPanelChurchHistorySupabaseApp.jsx: ReplacedNavDropdownwithSiteNavTogglebutton +SiteNavPanelnavOpenstate and passactiveKeyto highlight current pageRemoved old dropdown styles from
App.css.nav-dropdown,.nav-dropdown-menu, and.nav-dropdown-itemstyles.site-nav-togglestyles for the hamburger buttonPage loader improvements across all HTML files
sessionStorageto track if loader has been seenImplementation Details
<aside role="dialog">,<nav aria-label="Primary">)aria-current="page"and inverted color schemehttps://claude.ai/code/session_011tVKEsSMcxkH5YinLVgunX