~repos /only-bible-app

---
type Props = {
  title: string;
  items: Array<{ text: string; link: string }>;
};

const { title, items }: Props = Astro.props;
---

<div class="selector-container">
  <button id={`${title}-button`} class="button-selector">
    {title}
  </button>
  <div
    id={`${title}-menu-container`}
    class="menu-container"
    style="display: none;"
  >
    <div
      class="menu-content"
      role="menu"
      aria-orientation="vertical"
      aria-labelledby="options-menu"
    >
      {
        items.map((item) => (
          <a href={item.link} class="menu-item" role="menuitem">
            {item.text}
          </a>
        ))
      }
    </div>
  </div>
</div>

<script data-astro-rerun is:inline define:vars={{ title }}>
  const selectorButton = document.getElementById(`${title}-button`);
  const menuContainer = document.getElementById(`${title}-menu-container`);

  selectorButton.addEventListener("click", () => {
    if (menuContainer.style.display === "none") {
      menuContainer.style.display = "block";
    } else {
      menuContainer.style.display = "none";
    }
  });

  document.addEventListener("click", function (event) {
    const isClickInside = selectorButton.contains(event.target) || menuContainer.contains(event.target);
    if (!isClickInside) {
      menuContainer.style.display = "none";
    }
  });
</script>

<style>
  .selector-container {
    display: inline-block;
    position: relative;
    margin-right: 0.5rem;
    text-align: left;
  }

  .button-selector {
    display: inline-flex;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    /* padding-left: 1rem; */
    padding-right: 1rem;
    /* margin: 0.25rem; */
    justify-content: center;
    width: 100%;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.25rem;
    background-color: #ffffff;
    &:hover {
      background-color: #f9fafb;
    }
  }

  .menu-container {
    overflow-y: auto;
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    border-radius: 0.1rem;
    width: 8rem;
    height: 24rem;
    background-color: #ffffff;
    transform-origin: top right;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    text-align: center;
  }

  .menu-content {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .menu-item {
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.1rem;
    /* font-weight: 400; */
    line-height: 1.25rem;
    color: #374151;
    &:hover {
      color: #111827;
      background-color: #f3f4f6;
    }
  }
</style>