---
import { getSections } from "../constants/sections.ts";
const currentPath = Astro.url.pathname;

const sections = await getSections();
---

<ul class="menu bg-base-200 rounded-box p-2 w-56 h-full overflow-y-auto">
  <li>
    <a href="/" class="menu-item">Introduction</a>
  </li>

  {sections.map(section => {
    const isActive = section.items.some(item => currentPath.startsWith(item.url));

    return (
    <li>
      <details open={isActive}>
        <summary class="toc-section-title">{section.title}</summary>
        <ul class="toc-sublist">
          {section.items.map(item => (
          <li class="toc-subitem">
            <a href={item.url} class="toc-link">{item.title}</a>
          </li>
          ))}
        </ul>
      </details>
    </li>
    );
  })}

</ul>