fix: hamburger on landing page

astro.config.mjs

@@ -84,6 +84,7 @@ export default defineConfig({
 				Header: "./src/components/overrides/Header.astro",
 				Footer: 'src/components/overrides/Footer.astro',
 				ThemeSelect: 'src/components/overrides/ThemeSelect.astro',
+				PageFrame: 'src/components/overrides/PageFrame.astro',
 			},
 			head: [
 				{

src/components/overrides/Header.astro

@@ -2,14 +2,13 @@
 import type { Props } from '@astrojs/starlight/props';
 import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro';
 import Search from '@astrojs/starlight/components/Search.astro';
-import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
+import SiteTitle from './SiteTitle.astro';
 import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
 import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
 
 const curLocale = Astro.props.locale;
 
 
-
 type Link = {
 	title: string;
 	value: string;
@@ -32,11 +31,6 @@ const links: Link[] = [
 		value: '/blog',
 		transfer: false,
 	},
-	{
-		title: 'About',
-		value: '/about',
-		transfer: true,
-	},
 	{
 		title: 'Releases',
 		value: '/release/',
@@ -46,7 +40,7 @@ const links: Link[] = [
 ---
 
 <div class="header sl-flex">
-	<div class="sl-flex">
+	<div class="full-width sl-flex">
 		<SiteTitle {...Astro.props} />
 	</div>
 	<div class="sl-flex">
@@ -77,6 +71,9 @@ const links: Link[] = [
 		align-items: center;
 		height: 100%;
 	}
+	.full-width {
+		width: 100%;
+	}
 
 	.right-group,
 	.social-icons {

src/components/overrides/PageFrame.astro

@@ -0,0 +1,94 @@
+---
+import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
+import type { Props } from '@astrojs/starlight/props';
+import Sidebar from './Sidebar.astro'
+const { labels } = Astro.props;
+---
+
+<div class="page sl-flex">
+	<header class="header"><slot name="header" /></header>
+		<nav class="sidebar" aria-label={labels['sidebarNav.accessibleLabel']}>
+			<MobileMenuToggle {...Astro.props} />
+			<div id="starlight__sidebar" class="sidebar-pane">
+				<div class="sidebar-content sl-flex">
+					<!--<slot name="sidebar" />  -->
+					<Sidebar {...Astro.props} />
+				</div>
+			</div>
+		</nav>
+	<div class="main-frame"><slot /></div>
+</div>
+
+<style>
+	.page {
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	.header {
+		z-index: var(--sl-z-index-navbar);
+		position: fixed;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		width: 100%;
+		height: var(--sl-nav-height);
+		border-bottom: 1px solid var(--sl-color-hairline-shade);
+		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+		padding-inline-end: var(--sl-nav-pad-x);
+		background-color: var(--sl-color-bg-nav);
+	}
+
+	:global([data-has-sidebar]) .header {
+		padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
+	}
+
+	.sidebar-pane {
+		visibility: var(--sl-sidebar-visibility, hidden);
+		position: fixed;
+		z-index: var(--sl-z-index-menu);
+		inset-block: var(--sl-nav-height) 0;
+		inset-inline-start: 0;
+		width: 100%;
+		background-color: var(--sl-color-black);
+		overflow-y: auto;
+	}
+
+	:global([aria-expanded='true']) ~ .sidebar-pane {
+		--sl-sidebar-visibility: visible;
+	}
+
+	.sidebar-content {
+		height: 100%;
+		min-height: max-content;
+		padding: 1rem var(--sl-sidebar-pad-x) 0;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	@media (min-width: 50rem) {
+		.sidebar-content::after {
+			content: '';
+			padding-bottom: 1px;
+		}
+		#starlight__sidebar {
+			display: none;
+		}
+	}
+
+	.main-frame {
+		padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+		padding-inline-start: var(--sl-content-inline-start);
+	}
+
+	@media (min-width: 50rem) {
+		:global([data-has-sidebar]) .header {
+			padding-inline-end: var(--sl-nav-pad-x);
+		}
+		.sidebar-pane {
+			--sl-sidebar-visibility: visible;
+			width: var(--sl-sidebar-width);
+			background-color: var(--sl-color-bg-sidebar);
+			border-inline-end: 1px solid var(--sl-color-hairline-shade);
+		}
+	}
+</style>

src/components/overrides/Sidebar.astro

@@ -42,6 +42,16 @@ const multiSidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
     ];
   }
 );
+let foundCurrentPage = false;
+for (const page of multiSidebarConfig) {
+    if (page[1]) {
+        foundCurrentPage = true;
+        break;
+    }
+}
+if (!foundCurrentPage && multiSidebarConfig.length > 0) {
+  multiSidebarConfig[0][1] = true;
+}
 ---
 
 <div class="__collapse">

src/components/overrides/SiteTitle.astro

@@ -18,12 +18,12 @@ type Link = {
 const links: Link[] = [
 	{
 		title: 'Guides',
-		value: '/start',
+		value: '/start/',
 		transfer: true,
 	},
 	{
 		title: 'References',
-		value: '/references',
+		value: '/reference/acl/',
 		transfer: true,
 	},
 	{
@@ -32,8 +32,8 @@ const links: Link[] = [
 		transfer: false,
 	},
 	{
-		title: 'About',
-		value: '/about',
+		title: 'Releases',
+		value: '/release/',
 		transfer: true,
 	},
 ];
@@ -163,4 +163,7 @@ const links: Link[] = [
 			font-size: var(--sl-text-sm);
 		}
 	}
+	starlight-select {
+		margin-left: auto;
+	}
 </style>