Skip to content

fix(docs): resolve duplicate mobile burger menu and delegate popover toggle #1366

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
max-ostapenko merged 4 commits into from
Oct 4, 2026
Merged

fix(docs): resolve duplicate mobile burger menu and delegate popover toggle #1366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
725d841
fix(docs): resolve duplicate mobile burger menu and delegate popover …
max-ostapenko Oct 4, 2026
e1843ac
refactor(docs): remove obsolete starlight-menu-button selectors and o…
max-ostapenko Oct 4, 2026
7a61730
refactor(docs): override MobileMenuToggle component instead of hiding…
max-ostapenko Oct 4, 2026
52a867c
refactor(docs): consolidate drawer styles in Header and revert custom…
max-ostapenko Oct 4, 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
1 change: 1 addition & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default defineConfig({
Sidebar: './src/components/docs/Sidebar.astro',
ThemeProvider: './src/components/docs/ThemeProvider.astro',
ThemeSelect: './src/components/docs/EmptyComponent.astro',
MobileMenuToggle: './src/components/docs/EmptyComponent.astro',
},
sidebar: [
{
Expand Down
50 changes: 25 additions & 25 deletions src/components/docs/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ import SiteHeader from '../Header.astro';
padding: 0 !important;
border-bottom: none !important;
}
/* Visually hide Starlight's default circular menu button; header hamburger controls it */
starlight-menu-button {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
/* Prevent body scrolling when Starlight sidebar popover is open on mobile */
body:has(.sidebar-pane:popover-open) {
overflow: hidden;
}
@media (min-width: 50rem) {
body:has(.sidebar-pane:popover-open) {
overflow: auto;
}
}
</style>

Expand Down Expand Up @@ -60,6 +60,7 @@ import SiteHeader from '../Header.astro';
const hamburger = document.querySelector('.ha-docs-header .hamburger');
const mobileNav = document.querySelector('.ha-docs-header nav#mobile');
const desktopNav = document.querySelector('.ha-docs-header nav#desktop');
const sidebar = document.getElementById('starlight__sidebar');

// Populate mobile nav with desktop links if empty
if (mobileNav && desktopNav && !mobileNav.hasChildNodes()) {
Expand All @@ -72,19 +73,29 @@ import SiteHeader from '../Header.astro';
if (hamburger && !hamburger.hasAttribute('data-initialized')) {
hamburger.setAttribute('data-initialized', 'true');
hamburger.addEventListener('click', () => {
const starlightBtn = document.querySelector('starlight-menu-button button') as HTMLButtonElement | null;
if (starlightBtn) {
// On pages with Starlight sidebar drawer, delegate toggle to Starlight
starlightBtn.click();
const expanded = starlightBtn.getAttribute('aria-expanded');
hamburger.setAttribute('aria-expanded', expanded || 'false');
if (sidebar && typeof (sidebar as any).togglePopover === 'function') {
// On pages with Starlight sidebar drawer, toggle the sidebar popover
(sidebar as any).togglePopover();
hamburger.setAttribute('aria-expanded', String(sidebar.matches(':popover-open')));
} else if (mobileNav) {
// On splash pages without sidebar drawer, toggle nav#mobile
const isExpanded = mobileNav.classList.toggle('active');
hamburger.setAttribute('aria-expanded', String(isExpanded));
}
});
}

// Keep hamburger aria-expanded synchronized with sidebar popover toggle events
if (sidebar && !sidebar.hasAttribute('data-toggle-listener')) {
sidebar.setAttribute('data-toggle-listener', 'true');
sidebar.addEventListener('toggle', ((e: Event) => {
const customEvent = e as CustomEvent & { newState?: string };
const isOpen = customEvent.newState ? customEvent.newState === 'open' : sidebar.matches(':popover-open');
if (hamburger) {
hamburger.setAttribute('aria-expanded', String(isOpen));
}
}) as EventListener);
}
}

// Close mobile nav when clicking outside
Expand All @@ -111,17 +122,6 @@ import SiteHeader from '../Header.astro';
}
});

// Keep hamburger aria-expanded synchronized if Starlight's menu changes
const observer = new MutationObserver(() => {
const isExpanded = document.body.hasAttribute('data-mobile-menu-expanded');
const hamburger = document.querySelector('.ha-docs-header .hamburger');
const starlightBtn = document.querySelector('starlight-menu-button button');
if (hamburger && starlightBtn) {
hamburger.setAttribute('aria-expanded', String(isExpanded));
}
});
observer.observe(document.body, { attributes: true, attributeFilter: ['data-mobile-menu-expanded'] });

setupDocsMobileMenu();
document.addEventListener('astro:page-load', setupDocsMobileMenu);
</script>
Loading