elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-23 19:48:31 +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'; import { SIDEBAR } from '../../config';
type Props = { type Props = {
currentPage: string; currentPage: string;
}; };
const { currentPage } = Astro.props as 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 langCode = 'en'; // getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode]; const sidebar = SIDEBAR[langCode];
--- ---
<nav aria-labelledby="grid-left"> <nav aria-labelledby="grid-left">
<ul class="nav-groups"> <ul class="nav-groups">
{ {
Object.entries(sidebar).map(([header, children]) => ( Object.entries(sidebar).map(([header, children]) => (
<li> <li>
<div class="nav-group"> <div class="nav-group">
<h2>{header}</h2> <h2>{header}</h2>
<ul> <ul>
{children.map((child) => { {children.map((child) => {
const url = Astro.site?.pathname + child.link; const url = Astro.site?.pathname + child.link;
return ( return (
<li class="nav-link"> <li class="">
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}> <a
{child.text} class={`pl-4 py-0.5 w-full hover:bg-gray-900 block${
</a> currentPageMatch === child.link ? ' bg-gray-900' : ''
</li> }`}
); href={url}
})} aria-current={currentPageMatch === child.link ? 'page' : false}
</ul> >
</div> {child.text}
</li> </a>
)) </li>
} );
</ul> })}
</ul>
</div>
</li>
))
}
</ul>
</nav> </nav>
<script is:inline> <script is:inline>
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
var target = document.querySelector('[aria-current="page"]'); var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) { if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector('.nav-groups').scrollTop = target.offsetTop; document.querySelector('.nav-groups').scrollTop = target.offsetTop;
} }
}); });
</script> </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"> <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} /> <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
</aside> </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}> <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
<slot /> <slot />
</PageContent> </PageContent>