---

import { getLanguageFromURL } from '../../languages';

import { SIDEBAR } from '../../config';

type Props = {

  currentPage: string;

};

const { currentPage } = Astro.props as Props;

const { BASE_URL } = import.meta.env;

let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);

const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;

const langCode = getLanguageFromURL(currentPage) || 'en';

const sidebar = SIDEBAR[langCode];

---

<nav aria-labelledby="grid-left" class="max-h-full overflow-auto pb-20 text-foreground">

  <ul>

    {

      Object.entries(sidebar).map(([header, children]) => (

        <li>

          <div class="nav-group pb-4">

            <h2>{header}</h2>

            <ul>

              {children.map((child) => {

                const url = `${baseNoTrailing}/${child.link}${child.link.endsWith('/') ? '' : '/'}`;

                return (

                  <li class="">

                    <a

                      class={`pl-4 py-0.5 w-full hover:bg-lineHighlight block${

                        currentPageMatch === child.link ? ' bg-lineHighlight' : ''

                      }`}

                      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"]');

  const nav = document.querySelector('.nav-groups');

  if (nav && target && target.offsetTop > window.innerHeight - 100) {

    nav.scrollTop = target.offsetTop;

  }

});

</script>