Premium Navbar Slider

<!-- Center-Mode Productivity Slider – Premium Navbar -->
<!-- Developer: Anna Marice Eben Boyose (Bamby) – MIT License -->

<section>
  <div class="head">
    <h2>Boost your professional workflow and productivity</h2>

    <div class="controls">
      <button id="prev" class="nav-btn"
              aria-label="Prev">‹</button>
      <button id="next" class="nav-btn"
              aria-label="Next">›</button>
    </div>
  </div>

  <div class="slider">
    <div class="track" id="track">

      <!-- Active Developers card -->
      <article class="project-card" active>
        <img class="project-card__bg"
             src="img/tech-bg-designers.jpg"
             alt="Developers working with multiple monitors" />

        <div class="project-card__content">
          <img class="project-card__thumb"
               src="img/tech-thumb-designers.jpg"
               alt="Developer with laptop" />
          <div>
            <h3 class="project-card__title">Developers</h3>
            <p class="project-card__desc">
              Ship cleaner code with focused navigation.
            </p>
            <button class="project-card__btn">
              Details
            </button>
          </div>
        </div>
      </article>

      <!-- ...other 4 cards for Product teams, DevOps & SRE, Content creators, Engineering leads... -->

    </div>
  </div>

  <div class="dots" id="dots"></div>
</section>

:root {
  --gap: 1.25rem;
  --speed: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --closed: 5rem;
  --open: 30rem;
  --accent: #ff6b35;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  background: #07090d;
  color: #c5c7ce;
}

/* ...full slider layout, hover states, responsive breakpoints... */
/* See /pages/6_PremiumNavbar/css/premium-navbar.css for the complete code. */

// Premium Navbar slider logic – center-mode & dots
(() => {
  const track = document.getElementById("track");
  const wrap  = track.parentElement;
  const cards = Array.from(track.children);
  const prev  = document.getElementById("prev");
  const next  = document.getElementById("next");
  const dotsBox = document.getElementById("dots");

  const isMobile = () => matchMedia("(max-width:767px)").matches;

  cards.forEach((_, i) => {
    const dot = document.createElement("span");
    dot.className = "dot";
    dot.onclick   = () => activate(i, true);
    dotsBox.appendChild(dot);
  });

  const dots = Array.from(dotsBox.children);
  let current = 0;

  function center(i) {
    const card = cards[i];
    const axis = isMobile() ? "top" : "left";
    const size = isMobile() ? "clientHeight" : "clientWidth";
    const start = isMobile() ? card.offsetTop : card.offsetLeft;

    wrap.scrollTo({
      [axis]: start - (wrap[size] / 2 - card[size] / 2),
      behavior: "smooth"
    });
  }

  function toggleUI(i) {
    cards.forEach((c, k) => c.toggleAttribute("active", k === i));
    dots.forEach((d, k)  => d.classList.toggle("active", k === i));
    prev.disabled = i === 0;
    next.disabled = i === cards.length - 1;
  }

  function activate(i, scroll) {
    if (i === current) return;
    current = i;
    toggleUI(i);
    if (scroll) center(i);
  }

  function go(step) {
    activate(
      Math.min(Math.max(current + step, 0), cards.length - 1),
      true
    );
  }

  prev.onclick = () => go(-1);
  next.onclick = () => go(1);

  // keyboard & touch navigation
  addEventListener("keydown", (e) => {
    if (["ArrowRight", "ArrowDown"].includes(e.key)) go(1);
    if (["ArrowLeft", "ArrowUp"].includes(e.key)) go(-1);
  }, { passive: true });

  // ...touchstart / touchend handlers + init...

})();