— Article In progress

Pop-pop-popver!

The new Popover API is great

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Can I use etc.

What is the advantage

<button
        popovertarget="menu"
        popovertargetaction="toggle"
        class="menu-trigger">☰</button
      >
      <nav id="menu" popover="auto" class="menu-content">
        <a href="/">👀 home</a>
        <a href="/about">📖 about</a>
        <a href="/stuff">🏗 stuff</a>
        <a href="/words">💬 words</a>
      </nav>

CSS stylable

    .menu-trigger {
      position: fixed;
      top: 1rem;
      right: 1rem;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      font-family: "Courier New", Courier, monospace;
      color: black;
      font-color: black;
      z-index: 20;
    }

    .menu-content:popover-open {
        display: flex;
        position: fixed;
        inset: unset;
        top: 1rem;
        right: 4rem;
        gap: 1rem;
        border: none;
        z-index: 20;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 0.5rem;
        padding: 1rem;
    }

    /* Modify the mobile styles to left-align content */
    @media (max-width: 768px) {
        .menu-content:popover-open {
            flex-direction: column;
            top: 4rem;          /* Position below the menu trigger */
            right: 1rem;        /* Keep aligned with the menu trigger */
            width: 160px;       /* Set a consistent width for the menu */
            text-align: left;   /* Left-align the text */
            padding: 1rem;      /* Even padding all around */
        }

        .menu-content a {
            padding: 0.5rem 1rem;  /* Add horizontal padding for better spacing */
            display: block;        /* Make the entire area clickable */
            width: 100%;          /* Ensure links take full width */
            box-sizing: border-box;/* Include padding in width calculation */
        }

        /* Add a subtle hover effect for better interaction feedback */
        .menu-content a:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 0.25rem;
        }
    }

    .menu-content a {
      text-decoration: none;
      color: black;
    }

    .menu-content a:hover {
      text-decoration: underline;
    }