Add Studies dropdown with Scripture Index link; split nav triggers into hover+click
Publish Container / docker (push) Successful in 14m4s
Publish Container / docker (push) Successful in 14m4s
- Studies nav item is now a dropdown (same pattern as Episodes): hover to expand, click the label to navigate directly to /study - Dropdown contains: All Studies (/study) and Scripture Index (/scripture) - Episodes dropdown follows the same split pattern: label navigates, caret toggles - Dropdown menus open on CSS :hover (desktop) and stay toggle-able on mobile - v1.2.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
nmemmertandClaude Sonnet 4.6 committed
1 parent
63d4f9e316
commit
83d631608b
2 files changed
+73
-26
No files matched your search
+42
-9
@@ -9438,36 +9438,55 @@
|
||||
}
|
||||
|
||||
.nav-dropdown-trigger {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-dropdown-label {
|
||||
color: var(--brand-muted);
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.96rem;
|
||||
line-height: inherit;
|
||||
text-decoration: none;
|
||||
transition: color 200ms;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.nav-dropdown-trigger:hover,
|
||||
.nav-dropdown--open .nav-dropdown-trigger {
|
||||
.nav-dropdown-label:hover,
|
||||
.nav-dropdown--open .nav-dropdown-label {
|
||||
color: var(--brand-gold);
|
||||
}
|
||||
|
||||
.nav-dropdown-caret {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0 0 0.25rem;
|
||||
color: var(--brand-muted);
|
||||
font-size: 0.7em;
|
||||
line-height: inherit;
|
||||
transition: color 200ms;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-dropdown-caret:hover,
|
||||
.nav-dropdown--open .nav-dropdown-caret {
|
||||
color: var(--brand-gold);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-dropdown-arrow {
|
||||
font-size: 0.7em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.nav-dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 0.75rem);
|
||||
top: calc(100% + 0.5rem);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(15, 15, 12, 0.98);
|
||||
@@ -9479,6 +9498,11 @@
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.nav-dropdown:hover .nav-dropdown-menu,
|
||||
.nav-dropdown--open .nav-dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-dropdown-item {
|
||||
display: block;
|
||||
padding: 0.55rem 1.1rem;
|
||||
@@ -9711,6 +9735,11 @@
|
||||
border-bottom: 1px solid rgba(201, 168, 76, 0.12);
|
||||
}
|
||||
|
||||
.nav-dropdown-label {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-dropdown-menu {
|
||||
display: none;
|
||||
position: static;
|
||||
@@ -9723,6 +9752,10 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nav-dropdown:hover .nav-dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-dropdown--open .nav-dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
+31
-17
@@ -377,20 +377,26 @@ function SiteSearchBar({ content }: { content: SiteContent }) {
|
||||
function SiteHeader({ content }: { content: SiteContent }) {
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [episodesOpen, setEpisodesOpen] = useState(false)
|
||||
const [studiesOpen, setStudiesOpen] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||
const studiesDropdownRef = useRef<HTMLDivElement>(null)
|
||||
const spotifyUrl = content.platformSpotifyUrl || '/spotify'
|
||||
const location = useLocation()
|
||||
const episodesActive = location.pathname.startsWith('/episodes') || location.pathname.startsWith('/finished')
|
||||
const studiesActive = location.pathname.startsWith('/study') || location.pathname === '/scripture'
|
||||
|
||||
useEffect(() => {
|
||||
function handleOutsideClick(e: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
|
||||
setEpisodesOpen(false)
|
||||
}
|
||||
if (studiesDropdownRef.current && !studiesDropdownRef.current.contains(e.target as Node)) {
|
||||
setStudiesOpen(false)
|
||||
}
|
||||
}
|
||||
if (episodesOpen) document.addEventListener('mousedown', handleOutsideClick)
|
||||
if (episodesOpen || studiesOpen) document.addEventListener('mousedown', handleOutsideClick)
|
||||
return () => document.removeEventListener('mousedown', handleOutsideClick)
|
||||
}, [episodesOpen])
|
||||
}, [episodesOpen, studiesOpen])
|
||||
|
||||
return (
|
||||
<header className="site-header">
|
||||
@@ -410,23 +416,31 @@ function SiteHeader({ content }: { content: SiteContent }) {
|
||||
<nav id="site-nav" className={`header-nav ${menuOpen ? 'header-nav--open' : ''}`}>
|
||||
{/* Episodes dropdown */}
|
||||
<div ref={dropdownRef} className={`nav-dropdown${episodesOpen ? ' nav-dropdown--open' : ''}`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`nav-dropdown-trigger${episodesActive ? ' header-nav-link--active' : ''}`}
|
||||
onClick={() => setEpisodesOpen(o => !o)}
|
||||
aria-expanded={episodesOpen}
|
||||
>
|
||||
Episodes <span className="nav-dropdown-arrow" aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
|
||||
</button>
|
||||
{episodesOpen && (
|
||||
<div className="nav-dropdown-menu">
|
||||
<NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
|
||||
<NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
|
||||
</div>
|
||||
)}
|
||||
<div className="nav-dropdown-trigger">
|
||||
<NavLink to="/episodes" className={`nav-dropdown-label${episodesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Episodes</NavLink>
|
||||
<button type="button" className="nav-dropdown-caret" onClick={() => setEpisodesOpen(o => !o)} aria-expanded={episodesOpen} aria-label="Episodes menu">
|
||||
<span aria-hidden="true">{episodesOpen ? '▴' : '▾'}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-dropdown-menu">
|
||||
<NavLink to="/episodes" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Current Series</NavLink>
|
||||
<NavLink to="/finished" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setEpisodesOpen(false) }}>Finished Books</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<NavLink to="/questions" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Q&A</NavLink>
|
||||
<NavLink to="/study" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Studies</NavLink>
|
||||
{/* Studies dropdown */}
|
||||
<div ref={studiesDropdownRef} className={`nav-dropdown${studiesOpen ? ' nav-dropdown--open' : ''}`}>
|
||||
<div className="nav-dropdown-trigger">
|
||||
<NavLink to="/study" className={`nav-dropdown-label${studiesActive ? ' header-nav-link--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Studies</NavLink>
|
||||
<button type="button" className="nav-dropdown-caret" onClick={() => setStudiesOpen(o => !o)} aria-expanded={studiesOpen} aria-label="Studies menu">
|
||||
<span aria-hidden="true">{studiesOpen ? '▴' : '▾'}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-dropdown-menu">
|
||||
<NavLink to="/study" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>All Studies</NavLink>
|
||||
<NavLink to="/scripture" className={({ isActive }) => `nav-dropdown-item${isActive ? ' nav-dropdown-item--active' : ''}`} onClick={() => { setMenuOpen(false); setStudiesOpen(false) }}>Scripture Index</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<NavLink to="/study/account" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>My Account</NavLink>
|
||||
<NavLink to="/resources" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Resources</NavLink>
|
||||
<NavLink to="/about" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>About</NavLink>
|
||||
|
||||
Reference in new issue
Block a user