fix: show mobile nav menu on splash homepage

Splash pages disable the sidebar, which also hid the mobile menu toggle.

Author: D3SOX

src/components/PageFrame.astro

@@ -1,23 +1,25 @@
 ---
 import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
+import Sidebar from 'virtual:starlight/components/Sidebar';
 import SplashBackground from './SplashBackground.astro';
 import SplashFeatureHotspots from './SplashFeatureHotspots.astro';
 
 const { hasSidebar, entry } = Astro.locals.starlightRoute;
 const hasHero = Boolean(entry.data.hero);
+const showMobileNav = hasSidebar || hasHero;
 ---
 
 <div class="page sl-flex">
 	{hasHero && <SplashBackground />}
 	{hasHero && <SplashFeatureHotspots />}
 	<header class="header"><slot name="header" /></header>
 	{
-		hasSidebar && (
+		showMobileNav && (
 			<nav class="sidebar print:hidden" aria-label={Astro.locals.t('sidebarNav.accessibleLabel')}>
 				<MobileMenuToggle />
 				<div id="starlight__sidebar" class="sidebar-pane">
 					<div class="sidebar-content sl-flex">
-						<slot name="sidebar" />
+						{hasSidebar ? <slot name="sidebar" /> : <Sidebar />}
 					</div>
 				</div>
 			</nav>
@@ -46,7 +48,8 @@ const hasHero = Boolean(entry.data.hero);
 			background-color: var(--sl-color-bg-nav);
 		}
 
-		:global([data-has-sidebar]) .header {
+		:global([data-has-sidebar]) .header,
+		:global([data-has-hero]) .header {
 			padding-inline-end: calc(
 				var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
 			);
@@ -89,7 +92,8 @@ const hasHero = Boolean(entry.data.hero);
 		}
 
 		@media (min-width: 50rem) {
-			:global([data-has-sidebar]) .header {
+			:global([data-has-sidebar]) .header,
+			:global([data-has-hero]) .header {
 				padding-inline-end: var(--sl-nav-pad-x);
 			}
 			.sidebar-pane {
@@ -98,6 +102,12 @@ const hasHero = Boolean(entry.data.hero);
 				background-color: var(--sl-color-bg-sidebar);
 				border-inline-end: 1px solid var(--sl-color-hairline-shade);
 			}
+			:global([data-has-hero]) .sidebar-pane {
+				--sl-sidebar-visibility: hidden;
+				width: 0;
+				border-inline-end: 0;
+				overflow: hidden;
+			}
 		}
 	}
 </style>