blob: 5cb9651b0d3c451de6bea6807e20ce145034fb96 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
---
import Sponsors from './Sponsors.astro';
import { SIDEBAR } from '../../config.ts';
import { getLanguageFromURL, removeLeadingSlash, removeTrailingSlash } from '../../util.ts';
import SidebarContent from './SidebarContent.astro';
import SidebarSectionToggle from './SidebarSectionToggle.tsx';
const { currentPage } = Astro.props;
// Get the slug w/o a leading or trailing slash
const currentPageMatch = removeLeadingSlash(removeTrailingSlash(currentPage));
const langCode = getLanguageFromURL(currentPage);
// SIDEBAR is a flat array. Group it by sections to properly render.
const sidebarSections = SIDEBAR[langCode].reduce((collection, item) => {
if (item.header) {
collection.push({ ...item, type: item.type, children: [] });
} else {
collection[collection.length - 1].children.push(item);
}
return collection;
}, []);
const learnSections = sidebarSections.filter((section) => section.type === 'learn');
const apiSections = sidebarSections.filter((section) => section.type === 'api');
let activeTab = 'learn';
for (const section of sidebarSections) {
if (section.children.some((item) => item.link === currentPageMatch)) {
activeTab = section.type;
}
}
---
<nav aria-labelledby="grid-left">
<SidebarSectionToggle client:load defaultActiveTab={activeTab} />
<ul class={`nav-groups`}>
<SidebarContent type={'learn'} defaultActiveTab={activeTab} sidebarSections={learnSections} {currentPageMatch} />
<SidebarContent type={'api'} defaultActiveTab={activeTab} sidebarSections={apiSections} {currentPageMatch} />
<li>
<Sponsors />
</li>
</ul>
</nav>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
}
});
</script>
<style lang="scss">
nav {
width: 100%;
margin-right: 1rem;
padding-top: 0rem;
}
.nav-groups {
height: 100%;
overflow-x: visible;
overflow-y: auto;
max-height: 100vh;
padding-bottom: var(--theme-navbar-height);
}
</style>
|
