From d30cf75af523bbc666a582e8101fbf9e8d61e941 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Mon, 4 Nov 2024 11:04:32 +0100
Subject: [PATCH] fix: sidebar restoration with content after default sidebar

---
 docs/astro.config.mjs                         |  2 +
 docs/src/components/Sidebar.astro             | 45 +++++++++++++++++++
 packages/starlight/components/Page.astro      | 16 ++++++-
 .../components/SidebarPersister.astro         |  9 ----
 4 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 docs/src/components/Sidebar.astro

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 1cddfcecf2e..7331077be74 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -34,6 +34,8 @@ export default defineConfig({
 	trailingSlash: 'always',
 	integrations: [
 		starlight({
+			// TODO(HiDeoo) Remove
+			components: { Sidebar: './src/components/Sidebar.astro' },
 			title: 'Starlight',
 			logo: {
 				light: '/src/assets/logo-light.svg',
diff --git a/docs/src/components/Sidebar.astro b/docs/src/components/Sidebar.astro
new file mode 100644
index 00000000000..e2dd2a051d8
--- /dev/null
+++ b/docs/src/components/Sidebar.astro
@@ -0,0 +1,45 @@
+---
+// TODO(HiDeoo) Remove this entire file
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/Sidebar.astro';
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+<div class="sl-hidden md:sl-block">
+	<div dir="ltr" lang="en" class="sponsors">
+		<h2 class="sponsors-title">Sponsored by</h2>
+		<a href="https://starlight.astro.build/" aria-label="Starlight"></a>
+		<a href="https://starlight.astro.build/" aria-label="Starlight"></a>
+	</div>
+</div>
+
+<style>
+	.sponsors {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0 1.5rem;
+		padding: 1.5rem 0.5rem 0.75rem;
+	}
+	a {
+		display: flex;
+		align-items: center;
+		min-height: 3rem;
+		opacity: 0.75;
+		background-color: red;
+		width: 96px;
+	}
+	a:hover {
+		opacity: 1;
+	}
+
+	.sponsors-title {
+		width: 100%;
+		color: var(--sl-color-gray-3);
+		font-size: var(--sl-text-xs);
+		font-weight: 400;
+		font-family: var(--__sl-font-mono);
+		line-height: var(--sl-line-height-headings);
+		margin: 0 0 0.5rem;
+	}
+</style>
diff --git a/packages/starlight/components/Page.astro b/packages/starlight/components/Page.astro
index 0ab90d1bacb..282cce0a9b3 100644
--- a/packages/starlight/components/Page.astro
+++ b/packages/starlight/components/Page.astro
@@ -79,7 +79,21 @@ const pagefindEnabled =
 		<SkipLink {...Astro.props} />
 		<PageFrame {...Astro.props}>
 			<Header slot="header" {...Astro.props} />
-			{Astro.props.hasSidebar && <Sidebar slot="sidebar" {...Astro.props} />}
+			{
+				Astro.props.hasSidebar && (
+					<Fragment slot="sidebar">
+						<Sidebar {...Astro.props} />
+						<script is:inline>
+							(() => {
+								const scroller = document.getElementById('starlight__sidebar');
+								if (!window._starlightScrollRestore || !scroller) return;
+								scroller.scrollTop = window._starlightScrollRestore;
+								delete window._starlightScrollRestore;
+							})();
+						</script>
+					</Fragment>
+				)
+			}
 			<script src="./SidebarPersistState"></script>
 			<TwoColumnContent {...Astro.props}>
 				<PageSidebar slot="right-sidebar" {...Astro.props} />
diff --git a/packages/starlight/components/SidebarPersister.astro b/packages/starlight/components/SidebarPersister.astro
index ae485c97b9f..1878bd6793c 100644
--- a/packages/starlight/components/SidebarPersister.astro
+++ b/packages/starlight/components/SidebarPersister.astro
@@ -54,15 +54,6 @@ declare global {
 	</script>
 
 	<slot />
-
-	<script is:inline>
-		(() => {
-			const scroller = document.getElementById('starlight__sidebar');
-			if (!window._starlightScrollRestore || !scroller) return;
-			scroller.scrollTop = window._starlightScrollRestore;
-			delete window._starlightScrollRestore;
-		})();
-	</script>
 </sl-sidebar-state-persist>
 
 <style>