fix: improve docs example (#4355)

* fix: improve docs example

* final touches

* chore: prettier

* lockfile

* ci?

* downgrade types node

* fresh lockfile

* lockfile and npmrc

* remove debug log

* Merge branch 'main' into docs-template-ts

* merging lockfiles suck

* update lockfile

* satisfy linter

1 files changed, 22 insertions, 30 deletions

diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
index 5ffa73c12..d0fe8da4e 100644
--- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -1,44 +1,34 @@
 ---
 import { getLanguageFromURL } from '../../languages';
 import { SIDEBAR } from '../../config';
-const { currentPage } = Astro.props;
+
+type Props = {
+	currentPage: string;
+};
+
+const { currentPage } = Astro.props as Props;
 const currentPageMatch = currentPage.slice(1);
 const langCode = getLanguageFromURL(currentPage);
-// SIDEBAR is a flat array. Group it by sections to properly render.
-const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
-	// If the first item is not a section header, create a new container section.
-	if (i === 0) {
-		if (!item.header) {
-			const pseudoSection = { text: '' };
-			col.push({ ...pseudoSection, children: [] });
-		}
-	}
-	if (item.header) {
-		col.push({ ...item, children: [] });
-	} else {
-		col[col.length - 1].children.push(item);
-	}
-	return col;
-}, []);
+const sidebar = SIDEBAR[langCode];
 ---
 
 <nav aria-labelledby="grid-left">
 	<ul class="nav-groups">
-		{sidebarSections.map((section) => (
+		{Object.entries(sidebar).map(([header, children]) => (
 			<li>
 				<div class="nav-group">
-					<h2 class="nav-group-title">{section.text}</h2>
+					<h2>{header}</h2>
 					<ul>
-						{section.children.map((child) => (
-							<li class="nav-link">
-								<a
-									href={`${Astro.site.pathname}${child.link}`}
-									aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}
-								>
-									{child.text}
-								</a>
-							</li>
-						))}
+						{children.map((child) => {
+							const url = Astro.site?.pathname + child.link;
+							return (
+								<li class="nav-link">
+									<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+										{child.text}
+									</a>
+								</li>
+							);
+						})}
 					</ul>
 				</div>
 			</li>
@@ -47,7 +37,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
 </nav>
 
 <script is:inline>
-	window.addEventListener('DOMContentLoaded', (event) => {
+	window.addEventListener('DOMContentLoaded', () => {
 		var target = document.querySelector('[aria-current="page"]');
 		if (target && target.offsetTop > window.innerHeight - 100) {
 			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
@@ -60,6 +50,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
 		width: 100%;
 		margin-right: 1rem;
 	}
+
 	.nav-groups {
 		height: 100%;
 		padding: 2rem 0;
@@ -98,6 +89,7 @@ const sidebarSections = SIDEBAR[langCode].reduce((col, item, i) => {
 		text-decoration: none;
 		display: block;
 	}
+
 	.nav-link a:hover,
 	.nav-link a:focus {
 		background-color: var(--theme-bg-hover);