feat(website): add build script for frontend dependencies

packages/website/templates/partials/navbar.html

@@ -0,0 +1,93 @@
+<div id="main-navbar" class="pt-1">
+  <nav class="navbar navbar-desktop msp-d-none msp-d-lg-block msp-container">
+    <ul class="msp-list-unstyle msp-hstack">
+      <li class="nav-item">
+        <a class="nav-link" href={link.href}>{link.text}</a>
+      </li>
+    </ul>
+  </nav>
+
+  <div class="msp-text-end msp-d-lg-none">
+    <OffCanvasBtn />
+    <OffCanvas>
+    <nav class="navbar navbar-mobile">
+      <ul class="list-unstyle text-start">
+        <li class="nav-item mb-3">
+          <a class="nav-link" href={link.href}>{link.text}</a>
+        </li>
+      </ul>
+    </nav>
+    </OffCanvas>
+  </div>
+</div>
+
+<script>
+  const setActiveLink = () => {
+    const links =
+      document.querySelectorAll < HTMLAnchorElement > (`#main-navbar a`);
+
+    links.forEach((link) => {
+      if (link.pathname === '/' && location.pathname === '/') {
+        link.classList.add('active');
+        return;
+      }
+
+      if (link.pathname === '/' && location.pathname !== '/') {
+        link.classList.remove('active');
+        return;
+      }
+
+      location.pathname.startsWith(link.pathname) ?
+        link.classList.add('active') :
+        link.classList.remove('active');
+    });
+  };
+  // Add active class to the current link
+  document.addEventListener('astro:page-load', setActiveLink, {
+    once: true
+  });
+  document.addEventListener('astro:after-swap', setActiveLink);
+</script>
+
+<style lang="scss">
+  nav {
+    width: 100%;
+  }
+
+  .navbar-desktop ul {
+    width: fit-content;
+    margin-left: auto;
+
+    .nav-item {
+      margin-bottom: 0;
+    }
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li>a {
+    padding: 0.25rem 0.5rem;
+  }
+
+  a {
+    --boder-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-decoration: none;
+
+    transition: background-color 200ms, color 200ms;
+  }
+
+  a.active {
+    border: 1px solid var(--prj-accent-bg);
+  }
+
+  a:hover {
+    --border-color: var(--prj-accent-bg);
+    background-color: var(--prj-accent-bg);
+    color: var(--prj-accent-text);
+    border: 1px solid var(--border-color);
+  }
+</style>