diff --git a/packages/components/src/OffCanvas/style.scss b/packages/components/src/OffCanvas/style.scss deleted file mode 100644 index 75abef1..0000000 --- a/packages/components/src/OffCanvas/style.scss +++ /dev/null @@ -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; -} diff --git a/packages/components/src/offcanvas/index.ts b/packages/components/src/offcanvas/index.ts new file mode 100644 index 0000000..32bb59a --- /dev/null +++ b/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"); + }); + }); +}; diff --git a/packages/components/src/offcanvas/style.scss b/packages/components/src/offcanvas/style.scss new file mode 100644 index 0000000..ad232b2 --- /dev/null +++ b/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; + } +} diff --git a/packages/components/src/OffCanvas/template.html b/packages/components/src/offcanvas/template.html similarity index 100% rename from packages/components/src/OffCanvas/template.html rename to packages/components/src/offcanvas/template.html diff --git a/packages/website/js/index.ts b/packages/website/js/index.ts index cfe5636..6d5aa24 100644 --- a/packages/website/js/index.ts +++ b/packages/website/js/index.ts @@ -1,2 +1,3 @@ import "@mini-strap/components/accordion/index.ts"; +import "@mini-strap/components/offcanvas/index.ts"; console.log("hello world!"); diff --git a/packages/website/sass/@mini-strap/core/style.scss b/packages/website/sass/@mini-strap/core/style.scss new file mode 120000 index 0000000..60be24d --- /dev/null +++ b/packages/website/sass/@mini-strap/core/style.scss @@ -0,0 +1 @@ +/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss \ No newline at end of file diff --git a/packages/website/sass/style.scss b/packages/website/sass/style.scss index 94868e5..52c28da 100644 --- a/packages/website/sass/style.scss +++ b/packages/website/sass/style.scss @@ -1,6 +1,7 @@ @use "@mini-strap/core"; @use "@mini-strap/components/navbar/navbar.scss"; @use "@mini-strap/components/accordion/accordion.scss"; +@use "@mini-strap/components/offcanvas/style.scss"; html { // background-color: red; diff --git a/packages/website/templates/base.html b/packages/website/templates/base.html index a2e6a6e..32ab91b 100644 --- a/packages/website/templates/base.html +++ b/packages/website/templates/base.html @@ -1,25 +1,26 @@ - - - - - alecodes.page - + + + + + alecodes.page + - {% block scripts %}{% endblock %} - + {% block scripts %} + {% endblock %} + - + - -
- {% include "partials/header.html" %} -
-
- {% block content %}{% endblock %} -
- + +
+ {% include "partials/header.html" %} +
+
+ {% block content %}{% endblock %} +
+ diff --git a/packages/website/templates/partials/header.html b/packages/website/templates/partials/header.html index 60ca2b4..f225fd7 100644 --- a/packages/website/templates/partials/header.html +++ b/packages/website/templates/partials/header.html @@ -1,20 +1,34 @@ - +
+
+ +
+
+ + +