51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
|
import { AetheriaPageContext, isSidebarLinkActive } from "./aetheria"
|
|
import { FullSlug, resolveRelative } from "../util/path"
|
|
|
|
export default (() => {
|
|
const AetheriaOverviewSidebar: QuartzComponent = ({
|
|
fileData,
|
|
aetheria,
|
|
}: QuartzComponentProps & { aetheria?: AetheriaPageContext }) => {
|
|
const currentSlug = fileData.slug ?? ("index" as FullSlug)
|
|
const sidebar = aetheria?.sidebar
|
|
|
|
if (!sidebar || sidebar.groups.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<section class="aetheria-overview-sidebar">
|
|
<div class="aetheria-overview-sidebar-inner">
|
|
<p class="aetheria-overview-branch">
|
|
<a href={resolveRelative(currentSlug, sidebar.slug)}>{sidebar.title}</a>
|
|
</p>
|
|
<nav class="aetheria-overview-nav" aria-label={`${sidebar.title} navigation`}>
|
|
{sidebar.groups.map((group) => (
|
|
<section class="aetheria-overview-group">
|
|
<p class="aetheria-overview-group-title">{group.title}</p>
|
|
<ul class="aetheria-overview-links">
|
|
{group.links.map((link) => {
|
|
const active = isSidebarLinkActive(currentSlug, link.slug)
|
|
return (
|
|
<li class={active ? "active" : undefined}>
|
|
<a
|
|
href={resolveRelative(currentSlug, link.slug)}
|
|
class={active ? "active" : undefined}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</section>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
return AetheriaOverviewSidebar
|
|
}) satisfies QuartzComponentConstructor
|