From 0981f95f16511a34eaa3ccbf089ee148c7f8d930 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Tue, 20 Dec 2022 22:26:12 +0100
Subject: [PATCH] style left sidebar

---
 .../components/LeftSidebar/LeftSidebar.astro  | 139 +++++-------------
 website/src/layouts/MainLayout.astro          |   2 +-
 2 files changed, 38 insertions(+), 103 deletions(-)

diff --git a/website/src/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index d008c972..47f93ee9 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/website/src/components/LeftSidebar/LeftSidebar.astro
@@ -3,117 +3,52 @@
 import { SIDEBAR } from '../../config';
 
 type Props = {
-	currentPage: string;
+  currentPage: string;
 };
 
 const { currentPage } = Astro.props as Props;
-const currentPageMatch = currentPage.endsWith('/')
-	? currentPage.slice(1, -1)
-	: currentPage.slice(1);
+const currentPageMatch = currentPage.endsWith('/') ? currentPage.slice(1, -1) : currentPage.slice(1);
 const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
 <nav aria-labelledby="grid-left">
-	<ul class="nav-groups">
-		{
-			Object.entries(sidebar).map(([header, children]) => (
-				<li>
-					<div class="nav-group">
-						<h2>{header}</h2>
-						<ul>
-							{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>
-			))
-		}
-	</ul>
+  <ul class="nav-groups">
+    {
+      Object.entries(sidebar).map(([header, children]) => (
+        <li>
+          <div class="nav-group">
+            <h2>{header}</h2>
+            <ul>
+              {children.map((child) => {
+                const url = Astro.site?.pathname + child.link;
+                return (
+                  <li class="">
+                    <a
+                      class={`pl-4 py-0.5 w-full hover:bg-gray-900 block${
+                        currentPageMatch === child.link ? ' bg-gray-900' : ''
+                      }`}
+                      href={url}
+                      aria-current={currentPageMatch === child.link ? 'page' : false}
+                    >
+                      {child.text}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </li>
+      ))
+    }
+  </ul>
 </nav>
 
 <script is:inline>
-	window.addEventListener('DOMContentLoaded', () => {
-		var target = document.querySelector('[aria-current="page"]');
-		if (target && target.offsetTop > window.innerHeight - 100) {
-			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
-		}
-	});
+  window.addEventListener('DOMContentLoaded', () => {
+    var target = document.querySelector('[aria-current="page"]');
+    if (target && target.offsetTop > window.innerHeight - 100) {
+      document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+    }
+  });
 </script>
-
-<style>
-	nav {
-		width: 100%;
-		margin-right: 1rem;
-	}
-
-	.nav-groups {
-		height: 100%;
-		padding: 2rem 0;
-		overflow-x: visible;
-		overflow-y: auto;
-		max-height: 100vh;
-	}
-
-	.nav-groups > li + li {
-		margin-top: 2rem;
-	}
-
-	.nav-groups > :first-child {
-		padding-top: var(--doc-padding);
-	}
-
-	.nav-groups > :last-child {
-		padding-bottom: 2rem;
-		margin-bottom: var(--theme-navbar-height);
-	}
-
-	.nav-group-title {
-		font-size: 1rem;
-		font-weight: 700;
-		padding: 0.1rem 1rem;
-		text-transform: uppercase;
-		margin-bottom: 0.5rem;
-	}
-
-	.nav-link a {
-		font-size: 1rem;
-		margin: 1px;
-		padding: 0.3rem 1rem;
-		font: inherit;
-		color: inherit;
-		text-decoration: none;
-		display: block;
-	}
-
-	.nav-link a:hover,
-	.nav-link a:focus {
-		background-color: var(--theme-bg-hover);
-	}
-
-	.nav-link a[aria-current='page'] {
-		color: var(--theme-text-accent);
-		background-color: var(--theme-bg-accent);
-		font-weight: 600;
-	}
-
-	@media (min-width: 50em) {
-		.nav-groups {
-			padding: 0;
-		}
-	}
-</style>
-
-<style is:global>
-	:root.theme-dark .nav-link a[aria-current='page'] {
-		color: hsla(var(--color-base-white), 100%, 1);
-	}
-</style>
diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro
index dcc61701..06af218d 100644
--- a/website/src/layouts/MainLayout.astro
+++ b/website/src/layouts/MainLayout.astro
@@ -42,7 +42,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
         <aside class="w-2xl fixed right-0 h-full overflow-auto pr-8 pl-0 pb-16" title="Table of Contents">
           <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
         </aside>
-        <div class="h-full w-full top-0 pl-[300px] grow overflow-auto px-2">
+        <div class="h-full w-full top-0 pl-[320px] grow overflow-auto px-2">
           <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
             <slot />
           </PageContent>