refactor(Components): move offcanvas from navbar to it's own component

astro.config.mjs

@@ -4,6 +4,7 @@ import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
+  prefetch: true,
   integrations: [react()],
   experimental: {},
 });

src/assets/icons/hamburger.svg

@@ -0,0 +1,11 @@
+<svg width="40px" height="40px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="" stroke-width="0.00024000000000000003" transform="rotate(0)">
+  <g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(1.1999999999999993,1.1999999999999993), scale(0.9)">
+    <rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="2.88" fill="none" strokewidth="0"></rect>
+  </g>
+  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384"></g>
+  <g id="SVGRepo_iconCarrier">
+    <path d="M2 5.5C2 4.94772 2.44772 4.5 3 4.5H21C21.5523 4.5 22 4.94772 22 5.5V6.5C22 7.05228 21.5523 7.5 21 7.5H3C2.44772 7.5 2 7.05228 2 6.5V5.5Z" fill="#cad3f5"></path>
+    <path d="M2 11.5C2 10.9477 2.44772 10.5 3 10.5H21C21.5523 10.5 22 10.9477 22 11.5V12.5C22 13.0523 21.5523 13.5 21 13.5H3C2.44772 13.5 2 13.0523 2 12.5V11.5Z" fill="#cad3f5"></path>
+    <path d="M3 16.5C2.44772 16.5 2 16.9477 2 17.5V18.5C2 19.0523 2.44772 19.5 3 19.5H21C21.5523 19.5 22 19.0523 22 18.5V17.5C22 16.9477 21.5523 16.5 21 16.5H3Z" fill="#cad3f5"></path>
+  </g>
+</svg>

src/components/Navbar.astro

@@ -1,4 +1,7 @@
 ---
+import OffCanvas from '@components/OffCanvas/OffCanvas.astro';
+import OffCanvasBtn from '@components/OffCanvas/OffCanvasBtn.astro';
+
 const links = [
   { href: '/', text: 'Home' },
   { href: '/blog', text: 'Blog' },
@@ -8,7 +11,8 @@ const links = [
 ];
 ---
 
-<nav class="navbar d-none d-lg-block">
+<div id="main-navbar">
+  <nav class="navbar d-none d-lg-block">
     <ul class="list-unstyle hstack">
       {
         links.map((link) => (
@@ -20,73 +24,11 @@ const links = [
         ))
       }
     </ul>
-</nav>
+  </nav>
-
-<div class="text-end d-lg-none">
-  <button id="btn-toggle" class="off-canvas-toggle" data-target="#mobile-nav">
-    <svg
-      width="40px"
-      height="40px"
-      viewBox="-2.4 -2.4 28.80 28.80"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke=""
-      stroke-width="0.00024000000000000003"
-      transform="rotate(0)"
-      ><g
-        id="SVGRepo_bgCarrier"
-        stroke-width="0"
-        transform="translate(1.1999999999999993,1.1999999999999993), scale(0.9)"
-        ><rect
-          x="-2.4"
-          y="-2.4"
-          width="28.80"
-          height="28.80"
-          rx="2.88"
-          fill="none"
-          strokewidth="0"></rect></g
-      ><g
-        id="SVGRepo_tracerCarrier"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke="#CCCCCC"
-        stroke-width="0.384"></g><g id="SVGRepo_iconCarrier">
-        <path
-          d="M2 5.5C2 4.94772 2.44772 4.5 3 4.5H21C21.5523 4.5 22 4.94772 22 5.5V6.5C22 7.05228 21.5523 7.5 21 7.5H3C2.44772 7.5 2 7.05228 2 6.5V5.5Z"
-          fill="#cad3f5"></path>
-        <path
-          d="M2 11.5C2 10.9477 2.44772 10.5 3 10.5H21C21.5523 10.5 22 10.9477 22 11.5V12.5C22 13.0523 21.5523 13.5 21 13.5H3C2.44772 13.5 2 13.0523 2 12.5V11.5Z"
-          fill="#cad3f5"></path>
-        <path
-          d="M3 16.5C2.44772 16.5 2 16.9477 2 17.5V18.5C2 19.0523 2.44772 19.5 3 19.5H21C21.5523 19.5 22 19.0523 22 18.5V17.5C22 16.9477 21.5523 16.5 21 16.5H3Z"
-          fill="#cad3f5"></path>
-      </g></svg
-    >
-
-    <span class="visually-hidden">Open sidebar</span>
-  </button>
-
-  <div id="mobile-nav" class="off-canvas">
-    <div class="off-canvas-content">
-      <button class="off-canvas-toggle" data-target="#mobile-nav">
-        <svg
-          width="40px"
-          height="40px"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="#ffffff"
-          ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
-            id="SVGRepo_tracerCarrier"
-            stroke-linecap="round"
-            stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"
-            ><path
-              fill="#cad3f5"
-              d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
-            ></path></g
-          ></svg
-        >
-      </button>
 
+  <div class="text-end d-lg-none">
+    <OffCanvasBtn />
+    <OffCanvas>
       <nav class="navbar">
         <ul class="list-unstyle text-start">
           {
@@ -100,31 +42,24 @@ const links = [
           }
         </ul>
       </nav>
-    </div>
+    </OffCanvas>
-
-    <div class="off-canvas-backdrop"></div>
   </div>
 </div>
 
 <script>
   const setActiveLink = () => {
-    const links = document.querySelectorAll(`a[href='${location.pathname}']`);
+    const links =
+      document.querySelectorAll<HTMLAnchorElement>(`#main-navbar a`);
 
-    links.forEach((link) => link.classList.add('active'));
+    links.forEach((link) =>
+      link.pathname === location.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);
-
-  document.querySelectorAll('.off-canvas-toggle').forEach((btn) =>
-    btn.addEventListener('click', (e) => {
-      const { target } = btn.dataset;
-
-      if (!target) return;
-
-      document.querySelector(target)?.classList.toggle('active');
-    }),
-  );
 </script>
 
 <style lang="scss">
@@ -159,60 +94,4 @@ const links = [
     color: var(--prj-accent-text);
     border: 1px solid var(--border-color);
   }
-
-  .off-canvas-toggle {
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-  }
-
-  .off-canvas {
-    .off-canvas-content {
-      overflow: hidden;
-      position: fixed;
-      height: 100vh;
-      z-index: 5;
-
-      background-color: var(--prj-bg);
-
-      top: 0;
-      right: 0;
-      left: 100%;
-
-      padding: var(--prj-spacing-3);
-
-      transition: left 0.4s ease-in-out;
-    }
-
-    &.active .off-canvas-content {
-      left: 50%;
-    }
-
-    .off-canvas-backdrop {
-      position: fixed;
-      height: 100vh;
-      z-index: 4;
-
-      background-color: rgba(0, 0, 0);
-      opacity: 0;
-
-      top: 0;
-      right: 0;
-      left: 100%;
-
-      padding: var(--prj-spacing-3);
-
-      // Delay the left transition on remove so it's desn't appear to be sliding or to be not working
-      transition: opacity 0.8s ease, left 0s linear 1s;
-    }
-
-    &.active .off-canvas-backdrop {
-      left: 0%;
-      opacity: 40%;
-      transition: opacity 0.8s ease, left 0s linear;
-    }
-  }
 </style>

src/components/OffCanvas/OffCanvas.astro

@@ -0,0 +1,107 @@
+---
+const { isOpen } = Astro.props;
+---
+
+<div id="mobile-nav" class="off-canvas">
+  <div class="off-canvas-content" transition:persist>
+    <button class="off-canvas-toggle" data-target="#mobile-nav">
+      <svg
+        width="40px"
+        height="40px"
+        viewBox="0 0 1024 1024"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="#ffffff"
+        ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+          id="SVGRepo_tracerCarrier"
+          stroke-linecap="round"
+          stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"
+          ><path
+            fill="#cad3f5"
+            d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+          ></path></g
+        ></svg
+      >
+    </button>
+
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+
+  <div class="off-canvas-backdrop off-canvas-toggle" data-target="#mobile-nav">
+  </div>
+</div>
+
+<style lang="scss">
+  .off-canvas {
+    .off-canvas-content {
+      overflow: hidden;
+      position: fixed;
+      height: 100vh;
+      z-index: 5;
+
+      background-color: var(--prj-bg);
+
+      top: 0;
+      right: 0;
+      left: 100%;
+
+      padding: var(--prj-spacing-3);
+
+      transition: left 0.4s ease-in-out;
+    }
+
+    &.active .off-canvas-content {
+      left: 50%;
+    }
+
+    .off-canvas-backdrop {
+      position: fixed;
+      height: 100vh;
+      z-index: 4;
+
+      background-color: rgba(0, 0, 0);
+      opacity: 0;
+
+      top: 0;
+      right: 0;
+      left: 100%;
+
+      padding: var(--prj-spacing-3);
+
+      // Delay the left transition on remove so it's desn't appear to be sliding or to be not working
+      transition: opacity 0.8s ease, left 0s linear 1s;
+    }
+
+    &.active .off-canvas-backdrop {
+      left: 0%;
+      opacity: 40%;
+      transition: opacity 0.8s ease, left 0s linear;
+    }
+  }
+
+  button.off-canvas-toggle {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+</style>
+
+<script>
+  document.addEventListener('astro:page-load', () => {
+    document
+      .querySelectorAll<HTMLElement>('.off-canvas-toggle')
+      .forEach((btn) =>
+        btn.addEventListener('click', () => {
+          const { target } = btn.dataset;
+
+          if (!target) return;
+
+          document.querySelector(target)?.classList.toggle('active');
+        }),
+      );
+  });
+</script>

src/components/OffCanvas/OffCanvasBtn.astro

@@ -0,0 +1,53 @@
+<button id="btn-toggle" class="off-canvas-toggle" data-target="#mobile-nav">
+  <svg
+    width="40px"
+    height="40px"
+    viewBox="-2.4 -2.4 28.80 28.80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke=""
+    stroke-width="0.00024000000000000003"
+    transform="rotate(0)"
+    ><g
+      id="SVGRepo_bgCarrier"
+      stroke-width="0"
+      transform="translate(1.1999999999999993,1.1999999999999993), scale(0.9)"
+      ><rect
+        x="-2.4"
+        y="-2.4"
+        width="28.80"
+        height="28.80"
+        rx="2.88"
+        fill="none"
+        strokewidth="0"></rect></g
+    ><g
+      id="SVGRepo_tracerCarrier"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke="#CCCCCC"
+      stroke-width="0.384"></g><g id="SVGRepo_iconCarrier">
+      <path
+        d="M2 5.5C2 4.94772 2.44772 4.5 3 4.5H21C21.5523 4.5 22 4.94772 22 5.5V6.5C22 7.05228 21.5523 7.5 21 7.5H3C2.44772 7.5 2 7.05228 2 6.5V5.5Z"
+        fill="#cad3f5"></path>
+      <path
+        d="M2 11.5C2 10.9477 2.44772 10.5 3 10.5H21C21.5523 10.5 22 10.9477 22 11.5V12.5C22 13.0523 21.5523 13.5 21 13.5H3C2.44772 13.5 2 13.0523 2 12.5V11.5Z"
+        fill="#cad3f5"></path>
+      <path
+        d="M3 16.5C2.44772 16.5 2 16.9477 2 17.5V18.5C2 19.0523 2.44772 19.5 3 19.5H21C21.5523 19.5 22 19.0523 22 18.5V17.5C22 16.9477 21.5523 16.5 21 16.5H3Z"
+        fill="#cad3f5"></path>
+    </g></svg
+  >
+
+  <span class="visually-hidden">Open sidebar</span>
+</button>
+
+<style lang="scss">
+  button.off-canvas-toggle {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+  }
+</style>

src/layouts/Layout.astro

@@ -25,11 +25,11 @@ const { title } = Astro.props;
     <!-- Reset and normilize styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gardevoir" />
   </head>
-  <body>
+  <body transition:animate="fade">
     <header>
       <Navbar />
     </header>
-    <main transition:animate="fade">
+    <main>
       <div id="layout-loading-spinner" class="d-none">
         <Spinner />
       </div>

tsconfig.json

@@ -7,7 +7,8 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["src/components/*"],
-      "@layouts/*": ["src/layouts/*"]
+      "@layouts/*": ["src/layouts/*"],
+      "@assets/*": ["src/assets/*"]
     },
     "plugins": [
       {