app/src/components/Sidenote.astro

---

---

<div class="sidenote-container">
  <aside class="sidenote">
    <slot />
  </aside>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const containers = document.querySelectorAll(".sidenote-container");

    containers.forEach((container) => {
      // Find the previous element (sibling just before)
      const previousElement = container.previousElementSibling as HTMLElement;

      if (previousElement && previousElement.parentNode) {
        // Create a wrapper div that will contain both the previous element and the sidenote
        const wrapper = document.createElement("div");
        wrapper.className = "sidenote-wrapper";

        // Insert the wrapper before the previous element
        previousElement.parentNode.insertBefore(wrapper, previousElement);

        // Move both the previous element and the sidenote container into the wrapper
        wrapper.appendChild(previousElement);
        wrapper.appendChild(container);

        // Style the wrapper to create the layout
        wrapper.style.position = "relative";
        wrapper.style.display = "block";

        // Style the sidenote container so it positions correctly
        const sidenoteContainer = container as HTMLElement;
        sidenoteContainer.style.position = "absolute";
        sidenoteContainer.style.top = "0";
        sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap
        sidenoteContainer.style.width = "260px";

        // Display the container with a fade-in
        sidenoteContainer.style.display = "block";
        sidenoteContainer.style.opacity = "0";

        // Fade-in with transition
        setTimeout(() => {
          sidenoteContainer.style.opacity = "1";
        }, 10);
      }
    });
  });
</script>

<style is:global>
  .sidenote-wrapper {
    /* The wrapper contains the original element and the sidenote */
    position: relative;
    display: block;
  }

  .sidenote-container {
    /* Hidden by default, will be displayed by JS */
    display: none;
    margin: 0;
    /* Transition for fade-in */
    transition: opacity 0.3s ease-in-out;
  }

  .sidenote {
    border-radius: 8px;
    padding: 0 30px;
    font-size: 0.9rem;
    color: var(--muted-color);
    margin: 0;
  }

  @media (--bp-content-collapse) {
    .sidenote-wrapper {
      /* Sur mobile, le wrapper n'a pas besoin de position relative */
      position: static !important;
    }

    .sidenote-container {
      position: static !important;
      width: auto !important;
      right: auto !important;
      top: auto !important;
      margin-top: 8px;
      /* Affichage normal sur mobile */
      display: block !important;
      opacity: 1 !important;
    }

    .sidenote {
      padding: 0;
    }
  }
</style>