From 89fd09fc0e7e3245d7694bf21ee6818f951d95f6 Mon Sep 17 00:00:00 2001
From: "Sean (ANGRYxScotsman)" <36518683+seanh1995@users.noreply.github.com>
Date: Mon, 3 Aug 2026 17:36:46 +0100
Subject: [PATCH] fix(docs): add mobile navigation to the splash homepage
 (#4904)

The homepage uses Starlight's splash template, which has no sidebar and
therefore never gets Starlight's own mobile menu toggle - on narrow
viewports there was no way to reach any nav link at all. Add a small
toggle + panel in the header (only rendered on pages without a sidebar)
exposing the same links as the desktop nav, and group it with the
search icon so mobile actions sit together instead of spread across
the header.

Also add the Store and Forums links to the real sidebar config so
they're reachable on mobile on every other page too (previously only
in the desktop-only top nav), and pull both URLs from a shared
site-links.ts so the sidebar config and header can't drift apart.
---
 docs/astro.config.mjs            |   3 +
 docs/src/components/Header.astro | 144 +++++++++++++++++++++++++++++--
 docs/src/site-links.ts           |   5 ++
 3 files changed, 147 insertions(+), 5 deletions(-)
 create mode 100644 docs/src/site-links.ts

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 88b8b0bb..e4116184 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -1,6 +1,7 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
+import { siteLinks } from './src/site-links.ts';
 
 // https://astro.build/config
 export default defineConfig({
@@ -59,8 +60,10 @@ export default defineConfig({
 						{ label: 'FAQ', slug: 'faq' },
 						{ label: 'Known Issues', slug: 'knownissues' },
 						{ label: 'Contributing', slug: 'contributing' },
+						{ label: siteLinks.forums.label, link: siteLinks.forums.href, attrs: { target: '_blank', rel: 'noreferrer' } },
 					],
 				},
+				{ label: siteLinks.store.label, link: siteLinks.store.href, attrs: { target: '_blank', rel: 'noreferrer' } },
 			],
 		}),
 	],
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
index 9a5007b8..faf02ea0 100644
--- a/docs/src/components/Header.astro
+++ b/docs/src/components/Header.astro
@@ -6,10 +6,15 @@ import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import SocialIcons from 'virtual:starlight/components/SocialIcons';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
+import { Icon } from '@astrojs/starlight/components';
+import { siteLinks } from '../site-links';
 
 // Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
 const shouldRenderSearch =
 	config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+
+// Pages with a sidebar already have Starlight's own mobile menu toggle; only splash pages need this one.
+const { hasSidebar } = Astro.locals.starlightRoute;
 ---
 
 <div class="header">
@@ -17,9 +22,36 @@ const shouldRenderSearch =
 	<div class="title-wrapper sl-flex">
 		<SiteTitle />
 	</div>
-	{/* Search box. */}
-	<div class="sl-flex print:hidden">
-		{shouldRenderSearch && <Search />}
+	<div class="mobile-actions sl-flex">
+		{/* Search box. */}
+		<div class="sl-flex print:hidden">
+			{shouldRenderSearch && <Search />}
+		</div>
+		{
+			!hasSidebar && (
+				<div class="site-nav-toggle sl-flex md:sl-hidden print:hidden">
+					<button type="button" aria-expanded="false" aria-controls="site-nav-panel" aria-label="Site navigation">
+						<Icon name="bars" class="open-menu" />
+						<Icon name="close" class="close-menu" />
+					</button>
+					<div id="site-nav-panel" class="site-nav-panel">
+						<div class="site-nav-panel-group">
+							<p class="site-nav-panel-heading">Documentation</p>
+							<a href="/guides/">User Guides</a>
+							<a href="/contributing/">Contribution Guides</a>
+							<a href="/code-reference/architecture/">Code Reference</a>
+						</div>
+						<div class="site-nav-panel-group">
+							<p class="site-nav-panel-heading">Help</p>
+							<a href="/faq/">FAQ</a>
+							<a href="/knownissues/">Known Issues</a>
+							<a href={siteLinks.forums.href} target="_blank" rel="noreferrer">{siteLinks.forums.label}</a>
+						</div>
+						<a class="site-nav-panel-link" href={siteLinks.store.href} target="_blank" rel="noreferrer">{siteLinks.store.label}</a>
+					</div>
+				</div>
+			)
+		}
 	</div>
 	{/* Right-side group: nav links, social icons, theme/language pickers. */}
 	<div class="sl-hidden md:sl-flex print:hidden right-group">
@@ -43,10 +75,10 @@ const shouldRenderSearch =
 				<div class="site-nav-menu">
 					<a href="/faq/">FAQ</a>
 					<a href="/knownissues/">Known Issues</a>
-					<a href="https://forum.christitus.com/" target="_blank" rel="noreferrer">Forums</a>
+					<a href={siteLinks.forums.href} target="_blank" rel="noreferrer">{siteLinks.forums.label}</a>
 				</div>
 			</div>
-			<a class="site-nav-link" href="https://christitus.com/downloads/" target="_blank" rel="noreferrer">Store</a>
+			<a class="site-nav-link" href={siteLinks.store.href} target="_blank" rel="noreferrer">{siteLinks.store.label}</a>
 		</nav>
 		<div class="sl-flex social-icons">
 			<SocialIcons />
@@ -56,6 +88,25 @@ const shouldRenderSearch =
 	</div>
 </div>
 
+<script>
+	const toggle = document.querySelector<HTMLElement>('.site-nav-toggle');
+	const btn = toggle?.querySelector('button');
+
+	if (toggle && btn) {
+		const setExpanded = (expanded: boolean) => btn.setAttribute('aria-expanded', String(expanded));
+
+		btn.addEventListener('click', () => setExpanded(btn.getAttribute('aria-expanded') !== 'true'));
+		toggle.addEventListener('keyup', (e) => {
+			if (e.code === 'Escape') {
+				setExpanded(false);
+				btn.focus();
+			}
+		});
+		// Collapse the panel if the viewport grows past the mobile breakpoint.
+		matchMedia('(min-width: 50em)').addEventListener('change', () => setExpanded(false));
+	}
+</script>
+
 <style>
 	@layer starlight.core {
 		/* Header shell: title, search, right-side nav group. */
@@ -75,6 +126,11 @@ const shouldRenderSearch =
 			min-width: 0;
 		}
 
+		.mobile-actions {
+			align-items: center;
+			gap: 0.75rem;
+		}
+
 		/* Right-side group: nav + social icons, divided by a hairline. */
 		.right-group,
 		.social-icons {
@@ -194,4 +250,82 @@ const shouldRenderSearch =
 		color: var(--sl-color-white);
 		background: var(--sl-color-gray-6);
 	}
+
+	/* Mobile equivalent of the site-nav, shown via a toggle button since the desktop nav is hidden below `md`. */
+	.site-nav-toggle button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border: 0;
+		border-radius: var(--wu-radius-sm, 0.5rem);
+		padding: 0;
+		background: none;
+		color: var(--sl-color-gray-2);
+		cursor: pointer;
+	}
+	.site-nav-toggle button:hover {
+		color: var(--sl-color-white);
+	}
+	.site-nav-toggle button svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+	.site-nav-toggle button[aria-expanded='true'] .open-menu,
+	.site-nav-toggle button:not([aria-expanded='true']) .close-menu {
+		display: none;
+	}
+
+	.site-nav-panel {
+		display: none;
+		position: fixed;
+		inset-inline: 0;
+		top: var(--sl-nav-height);
+		z-index: var(--sl-z-index-menu);
+		flex-direction: column;
+		gap: 0.25rem;
+		max-height: calc(100vh - var(--sl-nav-height));
+		overflow-y: auto;
+		padding: 1rem var(--sl-nav-pad-x) 1.5rem;
+		background: var(--sl-color-bg-nav);
+		border-bottom: 1px solid var(--sl-color-hairline-shade);
+	}
+	.site-nav-toggle button[aria-expanded='true'] ~ .site-nav-panel {
+		display: flex;
+	}
+	.site-nav-panel-link {
+		padding: 0.5rem 0.25rem;
+		font-size: var(--sl-text-sm);
+		font-weight: 500;
+		color: var(--sl-color-gray-2);
+		text-decoration: none;
+	}
+	.site-nav-panel-link:hover {
+		color: var(--sl-color-white);
+	}
+	.site-nav-panel-group {
+		display: flex;
+		flex-direction: column;
+		border-top: 1px solid var(--sl-color-hairline-light);
+		padding-top: 0.5rem;
+	}
+	.site-nav-panel-heading {
+		margin: 0 0 0.25rem;
+		padding: 0 0.25rem;
+		font-size: var(--sl-text-xs);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.02em;
+		color: var(--sl-color-gray-3);
+	}
+	.site-nav-panel-group a {
+		padding: 0.5rem 0.25rem;
+		font-size: var(--sl-text-sm);
+		color: var(--sl-color-gray-2);
+		text-decoration: none;
+	}
+	.site-nav-panel-group a:hover {
+		color: var(--sl-color-white);
+	}
 </style>
diff --git a/docs/src/site-links.ts b/docs/src/site-links.ts
new file mode 100644
index 00000000..dc2f31aa
--- /dev/null
+++ b/docs/src/site-links.ts
@@ -0,0 +1,5 @@
+// Shared external links, so astro.config.mjs and Header.astro can't drift out of sync.
+export const siteLinks = {
+	store: { label: 'Store', href: 'https://christitus.com/downloads/' },
+	forums: { label: 'Forums', href: 'https://forum.christitus.com/' },
+} as const;