From c47a2eff893b981d423e84f523d290f5b1a675d1 Mon Sep 17 00:00:00 2001 From: aleidk Date: Thu, 26 Dec 2024 19:49:08 -0300 Subject: [PATCH] feat(components): add offcanvas component --- packages/components/package.json | 3 +- packages/components/src/OffCanvas/style.scss | 59 ---------------- packages/components/src/navbar/navbar.html | 35 +++++++++- packages/components/src/navbar/navbar.scss | 69 ++++++++++--------- packages/components/src/offcanvas/index.ts | 21 ++++++ packages/components/src/offcanvas/style.scss | 66 ++++++++++++++++++ .../{OffCanvas => offcanvas}/template.html | 0 packages/core/src/_tokens.scss | 10 +++ packages/core/src/_utils.scss | 8 +++ packages/website/js/index.ts | 1 + .../website/sass/@mini-strap/core/style.scss | 1 + packages/website/sass/style.scss | 1 + packages/website/templates/base.html | 35 +++++----- .../website/templates/partials/header.html | 53 +++++++++----- 14 files changed, 233 insertions(+), 129 deletions(-) delete mode 100644 packages/components/src/OffCanvas/style.scss create mode 100644 packages/components/src/offcanvas/index.ts create mode 100644 packages/components/src/offcanvas/style.scss rename packages/components/src/{OffCanvas => offcanvas}/template.html (100%) create mode 120000 packages/website/sass/@mini-strap/core/style.scss diff --git a/packages/components/package.json b/packages/components/package.json index c30bc4a..1b172f0 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -8,7 +8,8 @@ "exports": { ".": "./src/index.ts", "./navbar/*": "./src/navbar/*", - "./accordion/*": "./src/accordion/*" + "./accordion/*": "./src/accordion/*", + "./offcanvas/*": "./src/offcanvas/*" }, "devDependencies": { "@types/bun": "latest", 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/navbar/navbar.html b/packages/components/src/navbar/navbar.html index de8b69b..d25e7e9 100644 --- a/packages/components/src/navbar/navbar.html +++ b/packages/components/src/navbar/navbar.html @@ -1 +1,34 @@ -

Hello World!

+{% macro navbar() %} + +{% endmacro navbar %} + + +{% macro navbar_item(href, label) %} +
  • + {{ label }} +
    • +{% endmacro navbar_item %} + +
    + + + + +
    diff --git a/packages/components/src/navbar/navbar.scss b/packages/components/src/navbar/navbar.scss index a74fb9f..f62025f 100644 --- a/packages/components/src/navbar/navbar.scss +++ b/packages/components/src/navbar/navbar.scss @@ -1,8 +1,43 @@ -nav { +nav.msp-navbar { width: 100%; + + ul { + padding: 0; + + li { + margin-bottom: 0; + height: 100%; + } + } + + 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(--msp-color-bg-accent); + } + + a:hover { + --border-color: var(--msp-color-bg-accent); + background-color: var(--msp-color-bg-accent); + color: var(--msp-color-text-accent); + border: 1px solid var(--border-color); + } } -.navbar-desktop ul { +.msp-navbar-desktop ul { width: fit-content; margin-left: auto; @@ -10,33 +45,3 @@ nav { 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); -} diff --git a/packages/components/src/offcanvas/index.ts b/packages/components/src/offcanvas/index.ts new file mode 100644 index 0000000..2f66aea --- /dev/null +++ b/packages/components/src/offcanvas/index.ts @@ -0,0 +1,21 @@ +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"); + } + + const targetElement = qs(target); + + if (!targetElement) { + throw new Error("No target found"); + } + + targetElement.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..fcce939 --- /dev/null +++ b/packages/components/src/offcanvas/style.scss @@ -0,0 +1,66 @@ +.msp-offcanvas { + --msp-offcanvas-anim-duration: var(--msp-anim-duration-md); + --msp-offcanvas-anim-curve-in: cubic-bezier(0.22, 0.61, 0.36, 1); + --msp-offcanvas-anim-curve-out: cubic-bezier(0.55, 0.06, 0.68, 0.19); + + &-content { + overflow: hidden; + position: fixed; + height: 100vh; + z-index: 5; + + background-color: var(--msp-color-bg); + + top: 0; + left: -100%; + + padding: var(--msp-spacing-3); + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out); + + &-body, + &-header, + &-footer { + position: relative; + z-index: 5; + } + } + + &.show { + .msp-offcanvas-backdrop { + opacity: 40%; + left: 0; + + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in), + left 0s linear; + } + + .msp-offcanvas-content { + left: 0; + + transition: left var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-in); + } + } + + .msp-offcanvas-backdrop { + position: fixed; + height: 100vh; + width: 100vw; + z-index: 4; + + background-color: rgba(0, 0, 0); + opacity: 0; + + top: 0; + left: -100%; + // Delay the width transition on remove so it's desn't appear to be sliding or to be not working + transition: + opacity var(--msp-offcanvas-anim-duration) + var(--msp-offcanvas-anim-curve-out), + left 0s linear var(--msp-offcanvas-anim-duration); + } +} 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/core/src/_tokens.scss b/packages/core/src/_tokens.scss index 8655783..7ea321d 100644 --- a/packages/core/src/_tokens.scss +++ b/packages/core/src/_tokens.scss @@ -91,6 +91,12 @@ $msp-colors: ( "--msp-color-transparent": transparent, ); +$anim: ( + "--msp-anim-duration-sm": 0.4s, + "--msp-anim-duration-md": 0.8s, + "--msp-anim-duration-lg": 1s, +); + // Native CSS Variables to allow overridings and usage in external stylesheets :root { @each $variable, $value in $msp-colors { @@ -101,6 +107,10 @@ $msp-colors: ( #{$variable}: #{$value}; } + @each $variable, $value in $anim { + #{$variable}: #{$value}; + } + // ── Borders ───────────────────────────────────────────────────────────── --msp-border-width: 1px; --msp-border-color: var(--msp-color-text-transparent); diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss index d18d9d2..86ba495 100644 --- a/packages/core/src/_utils.scss +++ b/packages/core/src/_utils.scss @@ -123,10 +123,18 @@ align-items: center; } +.msp-justify-content-start { + justify-content: start !important; +} + .msp-justify-content-center { justify-content: center !important; } +.msp-justify-content-end { + justify-content: end !important; +} + .msp-justify-content-between { justify-content: space-between !important; } 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..5a0f50d 100644 --- a/packages/website/templates/partials/header.html +++ b/packages/website/templates/partials/header.html @@ -1,20 +1,35 @@ - +
    +
    + +
    +
    + + +