pokemon/src/components/NavItems.astro

---
---
<button
  class="navbar-toggler ms-4 p-1 btn btn-purple border-0"
  type="button"
  data-bs-toggle="offcanvas"
  data-bs-target="#navOffcanvas"
  aria-controls="navOffcanvas"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon"></span>
</button>

<div
  id="navOffcanvasWrapper"
  data-bs-theme="dark"
>
  <div
    class="offcanvas offcanvas-end"
    tabindex="-1"
    id="navOffcanvas"
    aria-labelledby="navOffcanvasLabel"
  >
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="navOffcanvasLabel">Menu</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body px-3 pt-0">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link py-3 border-bottom border-secondary" href="/pokemon">Browse Cards</a>
        </li>
        <!--<li class="nav-item">
          <a class="nav-link py-3" href="/dashboard">Dashboard</a>
        </li> -->
      </ul>
    </div>
  </div>
</div>

<script is:inline>
  document.addEventListener('DOMContentLoaded', () => {
    const wrapper = document.getElementById('navOffcanvasWrapper');
    if (wrapper) document.body.appendChild(wrapper);
  });
</script>