You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
228 lines
7.0 KiB
228 lines
7.0 KiB
---
|
|
import { getLanguageFromURL } from "../../languages";
|
|
import { SIDEBAR } from "../../config";
|
|
import type { SidebarLink } from "../../config";
|
|
|
|
type Props = {
|
|
currentPage: string;
|
|
};
|
|
|
|
const { currentPage } = Astro.props as Props;
|
|
const currentPageMatch = currentPage.endsWith("/") ? currentPage.slice(1, -1) : currentPage.slice(1);
|
|
const langCode = 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;
|
|
|
|
if (child.links) {
|
|
return (
|
|
<>
|
|
<li class="nav-sub-group">
|
|
<details
|
|
open={
|
|
child.links.find((link) => link.link === currentPageMatch)
|
|
? true
|
|
: false
|
|
}
|
|
>
|
|
<summary class="nav-link title">{child.text}</summary>
|
|
|
|
<ul>
|
|
{child.links.map((child) => {
|
|
const url = Astro.site?.pathname + child.link;
|
|
return (
|
|
<li class="nav-sub-link">
|
|
<a
|
|
href={url}
|
|
aria-current={
|
|
currentPageMatch === child.link
|
|
? "page"
|
|
: false
|
|
}
|
|
>
|
|
{child.text}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
</>
|
|
);
|
|
} else {
|
|
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>
|
|
</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;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
details {
|
|
position: relative;
|
|
}
|
|
|
|
details summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
summary::after {
|
|
position: absolute;
|
|
right: 1em;
|
|
content: " +";
|
|
}
|
|
|
|
details[open] summary:after {
|
|
content: " -";
|
|
}
|
|
|
|
nav {
|
|
width: auto;
|
|
margin-right: 0rem;
|
|
}
|
|
|
|
.nav-groups {
|
|
height: 100%;
|
|
padding: 2rem 0;
|
|
overflow-x: visible;
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
scrollbar-color: var(--theme-accent) var(--theme-bg-accent);
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
padding: 0.15rem 1rem;
|
|
margin: 0.15rem 0;
|
|
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;
|
|
}
|
|
|
|
.nav-sub-link a {
|
|
border-radius: 5px;
|
|
font-size: 1rem;
|
|
padding: 0.15rem 1rem;
|
|
margin: 0;
|
|
margin-left: 0rem;
|
|
font: inherit;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.nav-sub-link a:hover,
|
|
.nav-sub-link a:focus {
|
|
background-color: var(--theme-bg-hover);
|
|
}
|
|
|
|
.nav-sub-link a[aria-current="page"] {
|
|
color: var(--theme-text-accent);
|
|
background-color: var(--theme-bg-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-link.title {
|
|
font-weight: 600;
|
|
padding: 0.15rem 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
@media (min-width: 50em) {
|
|
.nav-groups {
|
|
padding: 0;
|
|
}
|
|
|
|
nav {
|
|
margin-left: 1rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 50em) {
|
|
nav {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
:root.theme-dark .nav-link a[aria-current="page"] {
|
|
color: hsla(var(--color-base-white), 100%, 1);
|
|
}
|
|
</style>
|