elias/strudel
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel.git synced 2026-01-12 06:08:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

style left sidebar

Browse Source
This commit is contained in:
Felix Roos 2022-12-20 22:26:12 +01:00
parent f64ef32eaa
commit 0981f95f16
2 changed files with 38 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
website/src/components/LeftSidebar/LeftSidebar.astro
View File

@ -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>

2
website/src/layouts/MainLayout.astro
View File

@ -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>