WIP: offcanvas

packages/components/src/OffCanvas/style.scss

@@ -1,59 +0,0 @@
-.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;
-}

packages/components/src/offcanvas/index.ts

@@ -0,0 +1,15 @@
+import { qs, qsa } from "../utils";
+
+window.onload = () => {
+	qsa(".msp-offcanvas-toggle").forEach((item) => {
+		item.addEventListener("click", () => {
+			const target = item.dataset.mspTarget;
+
+			if (!target) {
+				throw new Error("No target provided");
+			}
+
+			qs(target)?.classList.toggle("show");
+		});
+	});
+};

packages/components/src/offcanvas/style.scss

@@ -0,0 +1,66 @@
+.msp-offcanvas {
+  &-content {
+    overflow: hidden;
+    position: fixed;
+    height: 100vh;
+    z-index: 5;
+
+    background-color: var(--msp-color-bg);
+
+    top: 0;
+    left: 0;
+
+    padding: var(--msp-spacing-3);
+
+    transition: left 0.4s ease-in-out;
+
+    &.show {
+      left: 50%;
+
+      .msp-offcanvas-backdrop {
+        width: 100vw;
+        opacity: 40%;
+        transition:
+          opacity 0.8s ease,
+          left 0s linear;
+      }
+    }
+
+    &-body,
+    &-header,
+    &-footer {
+      position: relative;
+      z-index: 5;
+    }
+  }
+
+  &.show {
+    left: 50%;
+
+    .msp-offcanvas-backdrop {
+      width: 100vw;
+      opacity: 40%;
+      transition:
+        opacity 0.8s ease,
+        left 0s linear;
+    }
+  }
+
+  .msp-offcanvas-backdrop {
+    position: fixed;
+    height: 100vh;
+    width: 0;
+    z-index: 4;
+
+    background-color: rgba(0, 0, 0);
+    opacity: 0;
+
+    top: 0;
+    left: 0;
+
+    // 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,
+      width 0s linear 1s;
+  }
+}