feat: implement barebone zola templates

_src/components/Navbar.astro

@@ -0,0 +1,124 @@
+---
+import { localizePath } from 'astro-i18next';
+import OffCanvas from '@components/OffCanvas/OffCanvas.astro';
+import OffCanvasBtn from '@components/OffCanvas/OffCanvasBtn.astro';
+import LangSelector from '@components/LangSelector.astro';
+
+const links = [
+  { href: localizePath('/'), text: 'Home' },
+  { href: localizePath('/blog'), text: 'Blog' },
+  { href: localizePath('/projects'), text: 'Projects' },
+  { href: localizePath('/curriculum'), text: 'Curriculum' },
+  { href: localizePath('/contact'), text: 'Contact' },
+];
+---
+
+<div id="main-navbar" class="pt-1">
+  <nav class="navbar navbar-desktop d-none d-lg-block container">
+    <ul class="list-unstyle hstack">
+      {
+        links.map((link) => (
+          <li class="nav-item">
+            <a class="nav-link" href={link.href}>
+              {link.text}
+            </a>
+          </li>
+        ))
+      }
+      <li class="nav-item">
+        <LangSelector />
+      </li>
+    </ul>
+  </nav>
+
+  <div class="text-end d-lg-none">
+    <OffCanvasBtn />
+    <OffCanvas>
+      <nav class="navbar navbar-mobile">
+        <ul class="list-unstyle text-start">
+          {
+            links.map((link) => (
+              <li class="nav-item mb-3">
+                <a class="nav-link" href={link.href}>
+                  {link.text}
+                </a>
+              </li>
+            ))
+          }
+          <li class="nav-item mb-3">
+            <LangSelector />
+          </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>