1---
2import { getLanguageFromURL } from '../../languages';
3import { SIDEBAR } from '../../config';
4
5type Props = {
6  currentPage: string;
7};
8
9const { currentPage } = Astro.props as Props;
10const { BASE_URL } = import.meta.env;
11let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
12const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
13
14const langCode = getLanguageFromURL(currentPage) || 'en';
15const sidebar = SIDEBAR[langCode];
16---
17
18<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">
19  <ul>
20    {
21      Object.entries(sidebar).map(([header, children]) => (
22        <li>
23          <div class="nav-group pb-4">
24            <h2>{header}</h2>
25            <ul>
26              {children.map((child) => {
27                const url = `${baseNoTrailing}/${child.link}${child.link.endsWith('/') ? '' : '/'}`;
28                return (
29                  <li class="">
30                    <a
31                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${
32                        currentPageMatch === child.link ? ' bg-lineHighlight' : ''
33                      }`}
34                      href={url}
35                      aria-current={currentPageMatch === child.link ? 'page' : false}
36                    >
37                      {child.text}
38                    </a>
39                  </li>
40                );
41              })}
42            </ul>
43          </div>
44        </li>
45      ))
46    }
47  </ul>
48</nav>
49
50<script is:inline>
51window.addEventListener('DOMContentLoaded', () => {
52  var target = document.querySelector('[aria-current="page"]');
53  const nav = document.querySelector('.nav-groups');
54  if (nav && target && target.offsetTop > window.innerHeight - 100) {
55    nav.scrollTop = target.offsetTop;
56  }
57});
58</script>