---
const { sNav } = Astro.props
---

<nav
  id="scrolling-navbar"
  class="navbar navbar-expand-lg bg-body-tertiary fixed-top rounded-3 shadow"
  style="display: none;"
>
  <div class="container">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarScroll"
      aria-controls="navbarScroll"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul
        class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll d-flex justify-content-between"
        style="--bs-scroll-height: 100px;--bs-bg-opacity: 0.9;flex:1"
      >
        {
          sNav?.map((item, index) => (
            <li class="nav-item mb-2">
              <a
                class={
                  index == 0 ? 'nav-link active a-link' : 'nav-link a-link'
                }
                href={`#${item}`}
              >
                {item}
              </a>
            </li>
          ))
        }
      </ul>
    </div>
  </div>
</nav>

<style>
  .a-link:hover {
    color: red;
  }
  .a-link:focus {
    color: red;
  }
</style>
<script>
  const NavMargin = document.querySelector('#scrolling-navbar')

  function pagescrollingNavbarMargin() {
    const offset = window.pageYOffset
    if (offset > 450) {
      // margin-top: 4.6rem;
      // width: 80%;left:10%
      // NavMargin.style.marginTop = 0
      NavMargin.style.display = 'block'
      NavMargin.style.width = '80%'
      NavMargin.style.left = '10%'
    } else {
      NavMargin.style.display = 'none'
    }
  }

  pagescrollingNavbarMargin()
  window.addEventListener('scroll', pagescrollingNavbarMargin)
</script>
