---
import type { nav } from "@/content/config";
import { getEntry } from "astro:content";

import Sidebar from "./Sidebar.astro";
import Hamburger from "@/assets/hamburger.svg";

const data = (await getEntry("nav", "urls")?.then((x) => x.data)) ?? [];
---

<nav>
  <h1>🪤 | vielle.dev</h1>
  <ul class="desktop">
    {
      (() => {
        const a = (name: string, href: string) => <a {href}>{name}</a>;
        const render = (
          name: string,
          children: nav[],
          popout: boolean = true,
        ) => {
          const list = (
            <ul>
              {children.map((x) => (
                <li>
                  {x.children
                    ? render(x.name, x.children, false)
                    : a(x.name, x.url || "")}
                </li>
              ))}
            </ul>
          );
          return popout ? (
            <details name="nav">
              <summary>
                <span>{name}</span>
              </summary>
              {list}
            </details>
          ) : (
            <>
              <span>{name}</span>
              {list}
            </>
          );
        };
        return data.map((entry) => (
          <li>
            {entry.children
              ? render(entry.name, entry.children)
              : a(entry.name, entry.url || "")}
          </li>
        ));
      })()
    }
  </ul>

  <button class="mobile" popovertarget="sidebar"><Hamburger /></button>

  <Sidebar />
</nav>

<style>
  nav {
    background-color: white;
    color: black;
    border: 5px solid black;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
  }

  nav > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;

    & > li {
      list-style-type: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 10px;
      &:not(:first-child)::before {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 2.5px;
        background-color: currentColor;
      }
    }
  }

  details {
    position: relative;

    summary::marker {
      content: url(../../assets/arrow-right.svg);
      + {
        margin-left: 5px;
      }
    }
    &[open] > summary::marker {
      content: url(../../assets/arrow-down.svg);
    }
  }

  details > ul {
    background-color: white;
    border: 5px solid black;
    border-radius: 20px;
    box-shadow: 0 10px;

    padding: 10px 20px;
    width: max-content;

    ul {
      margin-left: 1em;
    }
  }

  /* positioning */
  details[open] {
    anchor-name: --detail-anchor;
    > ul {
      position: absolute;

      /* fallback for no anchor support */
      right: -20px;

      /* remove fallback when supported */
      @supports (anchor-name: --supports-anchor) {
        position: fixed;
        right: unset;
      }

      /* anchor positioning. all properties should progressive enhance */
      position-anchor: --detail-anchor;
      position-area: bottom span-right;
      position-try-fallbacks: flip-inline;
      position-try: flip-inline;
    }
  }

  h1 {
    margin-right: auto;
    font-size: 1.5rem;
    white-space: nowrap;
  }

  button:has(svg) {
    padding: 0;
    border: none;
    background-color: transparent;

    width: 2em;
    height: 2em;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  .mobile {
    display: none;
  }

  @media screen and (max-width: 650px) {
    .mobile {
      display: var(--display, block) !important;
    }

    .desktop {
      display: none !important;
    }
  }
</style>