style left sidebar

website/src/components/LeftSidebar/LeftSidebar.astro

@@ -7,9 +7,7 @@ type Props = {
 };
 
 const { currentPage } = Astro.props as Props;
-const currentPageMatch = currentPage.endsWith('/')
+const currentPageMatch = currentPage.endsWith('/') ? currentPage.slice(1, -1) : currentPage.slice(1);
-	? currentPage.slice(1, -1)
-	: currentPage.slice(1);
 const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
@@ -25,8 +23,14 @@ const sidebar = SIDEBAR[langCode];
               {children.map((child) => {
                 const url = Astro.site?.pathname + child.link;
                 return (
-									<li class="nav-link">
+                  <li class="">
-										<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+                    <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>
@@ -48,72 +52,3 @@ const sidebar = SIDEBAR[langCode];
     }
   });
 </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>

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>