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/offcanvas/index.ts";
|
||||
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/components/navbar/navbar.scss";
|
||||
@use "@mini-strap/components/accordion/accordion.scss";
|
||||
@use "@mini-strap/components/offcanvas/style.scss";
|
||||
|
||||
html {
|
||||
// background-color: red;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,14 @@
|
|||
<title>alecodes.page</title>
|
||||
<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" />
|
||||
|
||||
</head>
|
||||
|
||||
<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" %}
|
||||
</header>
|
||||
<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">
|
||||
<li>
|
||||
<a href="/">Overview</a>
|
||||
|
|
@ -5,7 +10,9 @@
|
|||
|
||||
{% for item in get_taxonomy(kind="section") | get(key="items") %}
|
||||
<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">
|
||||
<ul class="msp-list-unstyle msp-accordion-content">
|
||||
{% for page in item.pages %}
|
||||
|
|
@ -18,3 +25,10 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</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