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

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

<aside id="sidebar" popover>
  <h2>🪤 | vielle.dev</h2>

  <nav>
    {
      (() => {
        const step = (entry: nav[]) => (
          <ul>
            {entry.map((x) => (
              <li>
                {x.url ? <a href={x.url}>{x.name}</a> : <span>{x.name}</span>}
                {x.children && step(x.children)}
              </li>
            ))}
          </ul>
        );
        return step(data);
      })()
    }
  </nav>
</aside>

<style>
  aside {
    inset: auto;
    top: 0;
    right: 0;
    height: 100%;

    background-color: white;
    color: black;
    border: 5px solid black;
    border-radius: 20px 0 0 20px;
    box-shadow: 0 10px;
    padding: 10px 20px;

    & ul {
      padding-inline: 1em;
    }

    &::backdrop {
      background-color: #00000080;
      backdrop-filter: blur(15px);
    }

    /* animations */
    --popover-animation-timing: 0.2s;
    @media (prefers-reduced-motion: reduce) {
      --popover-animation-timing: 0;
    }
    --popover-animation-easing: ease-in-out;

    transition:
      translate var(--popover-animation-timing, 0.2s)
        var(--popover-animation-easing, linear) allow-discrete,
      overlay var(--popover-animation-timing, 0.2s)
        var(--popover-animation-easing, linear) allow-discrete,
      display var(--popover-animation-timing, 0.2s)
        var(--popover-animation-easing, linear) allow-discrete;

    /* exit */
    translate: 100% 0;
    /* base */
    &:popover-open {
      translate: 0 0;
      /* enter */
      @starting-style {
        translate: 100% 0;
      }
    }

    &::backdrop {
      transition:
        display var(--popover-animation-timing)
          var(--popover-animation-easing, linear) allow-discrete,
        overlay var(--popover-animation-timing, 0.2s)
          var(--popover-animation-easing, linear) allow-discrete,
        opacity var(--popover-animation-timing)
          var(--popover-animation-easing, linear) allow-discrete;

      /* exit */
      opacity: 0;
    }
    /* base */
    &:popover-open::backdrop {
      opacity: 1;
      /* enter */
      @starting-style {
        opacity: 0;
      }
    }
  }
</style>