WIP: offcanvas
This commit is contained in:
parent
e0ed5a5ddd
commit
68c074d271
9 changed files with 135 additions and 95 deletions
|
|
@ -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;
|
|
||||||
}
|
|
||||||
15
packages/components/src/offcanvas/index.ts
Normal file
15
packages/components/src/offcanvas/index.ts
Normal file
|
|
@ -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");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
66
packages/components/src/offcanvas/style.scss
Normal file
66
packages/components/src/offcanvas/style.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,2 +1,3 @@
|
||||||
import "@mini-strap/components/accordion/index.ts";
|
import "@mini-strap/components/accordion/index.ts";
|
||||||
|
import "@mini-strap/components/offcanvas/index.ts";
|
||||||
console.log("hello world!");
|
console.log("hello world!");
|
||||||
|
|
|
||||||
1
packages/website/sass/@mini-strap/core/style.scss
Symbolic link
1
packages/website/sass/@mini-strap/core/style.scss
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
/home/aleidk/Repos/Projects/mini-strap/packages/core/src/style.scss
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
@use "@mini-strap/core";
|
@use "@mini-strap/core";
|
||||||
@use "@mini-strap/components/navbar/navbar.scss";
|
@use "@mini-strap/components/navbar/navbar.scss";
|
||||||
@use "@mini-strap/components/accordion/accordion.scss";
|
@use "@mini-strap/components/accordion/accordion.scss";
|
||||||
|
@use "@mini-strap/components/offcanvas/style.scss";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,14 @@
|
||||||
<title>alecodes.page</title>
|
<title>alecodes.page</title>
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
|
|
||||||
{% block scripts %}<script src="/js/index.js"></script>{% endblock %}
|
{% block scripts %}
|
||||||
|
<script src="/js/index.js"></script>{% endblock %}
|
||||||
<link rel="stylesheet" href="/css/style.css" />
|
<link rel="stylesheet" href="/css/style.css" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body transition:animate="fade">
|
<body transition:animate="fade">
|
||||||
<header class="msp-position-sticky msp-py-1 msp-py-lg-3">
|
<header class="msp-py-1 msp-py-lg-3">
|
||||||
{% include "partials/header.html" %}
|
{% include "partials/header.html" %}
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,8 @@
|
||||||
|
<aside id="main-offcanvas" class="msp-offcanvas show">
|
||||||
|
<div class="msp-offcanvas-backdrop msp-offcanvas-toggle" data-msp-target="#main-offcanvas"></div>
|
||||||
|
|
||||||
|
<div class="msp-offcanvas-content">
|
||||||
|
<div class="msp-offcanvas-body">
|
||||||
<ul class="msp-list-unstyle msp-accordion">
|
<ul class="msp-list-unstyle msp-accordion">
|
||||||
<li>
|
<li>
|
||||||
<a href="/">Overview</a>
|
<a href="/">Overview</a>
|
||||||
|
|
@ -5,7 +10,9 @@
|
||||||
|
|
||||||
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
||||||
<li class="msp-accordion-item">
|
<li class="msp-accordion-item">
|
||||||
<a class="msp-accordion-header" href="{{ get_url(path="@/" ~ item.slug ~ "/_index.md") }}">{{ item.name | title }}</a>
|
<a class="msp-accordion-header" href="{{ get_url(path=" @/" ~ item.slug ~ "/_index.md" ) }}">{{ item.name |
|
||||||
|
title
|
||||||
|
}}</a>
|
||||||
<div class="msp-accordion-collapse">
|
<div class="msp-accordion-collapse">
|
||||||
<ul class="msp-list-unstyle msp-accordion-content">
|
<ul class="msp-list-unstyle msp-accordion-content">
|
||||||
{% for page in item.pages %}
|
{% for page in item.pages %}
|
||||||
|
|
@ -18,3 +25,10 @@
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<button class="msp-offcanvas-toggle" data-msp-target="#main-offcanvas">Toggle</button>
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue