navbar.svelte

<script>
    import { page } from '$app/stores';
    let links = [
        {
            title: "Home",
            path: "/",
        },
        {
            title: "About",
            path: "/about",
        },
        {
            title: "Contact",
            path: "/contact",
        },
        {
            title: "Pricing",
            path: "/pricing",
        },
        {
            title: "FAQ",
            path: "/faq",
        },
    ];
</script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold" href="/">SpyderByte</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Navbar menus -->
      <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
        {#each links as link}
        <li class="nav-item">
          <a class="nav-link" class:active={link.path === $page.url.pathname} aria-current={link.path === $page.url.pathname} href="{link.path}">{link.title}</a>
        </li>
        {/each}
      </ul>
      <!-- Social media icons -->
      <ul class="navbar-nav sm-icons">
        <li>
          <a class="icon-link" href="https://facebook.com/">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
              <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
            </svg>
          </a>
        </li>
        <li><a class="nav-link" href="/">hey<i class="bi bi-instagram"></i></a></li>
        <li><a class="nav-link" href="/">yo<i class="bi bi-twitter"></i></a></li>
        <li><a class="nav-link" href="/">dad<i class="bi bi-pinterest"></i></a></li>
      </ul>
    </div>
  </div>
</nav>