115 lines
2.8 KiB
JavaScript
115 lines
2.8 KiB
JavaScript
import {html, css, LitElement, classMap} from 'lit'
|
|
|
|
const openIcon = RAILS_ASSET_URL('/mingcute/hamburger_line.svg')
|
|
const closeIcon = RAILS_ASSET_URL('/mingcute/close_fill.svg')
|
|
|
|
export class SiteSidebar extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
--padding: 0.25rem;
|
|
--_button-size: var(--button-size, 2rem);
|
|
--_button-offset: var(--button-offset, 2px);
|
|
flex-basis: calc(var(--_button-size) + var(--_button-offset));
|
|
}
|
|
|
|
aside {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
height: 100%;
|
|
width: min(15em, 30%);
|
|
background: var(--background);
|
|
color: var(--color);
|
|
box-shadow: calc(var(--_button-size) / 2 + var(--_button-offset)) 0 var(--background);
|
|
|
|
transform: translateX(-100%);
|
|
transition: transform 0.2s ease;
|
|
|
|
box-sizing: border-box;
|
|
padding-block: var(--padding);
|
|
|
|
isolation: isolate;
|
|
z-index: 99;
|
|
|
|
&.open {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.padding {
|
|
padding-inline: var(--padding);
|
|
}
|
|
|
|
.toggle-button-container {
|
|
background-color: var(--pico-muted-border-color);
|
|
border: 3px solid var(--pico-muted-color);
|
|
border-radius: 1000px;
|
|
corner-shape: squircle;
|
|
position: absolute;
|
|
left: calc(100% + var(--_button-offset));
|
|
|
|
/* Mostly to fix the oversized hamburger */
|
|
scale: 60%;
|
|
transform-origin: 0 50%;
|
|
}
|
|
|
|
.bg {
|
|
transition: opacity 0.2s ease;
|
|
transition-behavior: allow-discrete;
|
|
background: black;
|
|
opacity: 0.6;
|
|
|
|
position: fixed;
|
|
inset: 0;
|
|
|
|
@starting-style {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
`
|
|
|
|
static properties = {
|
|
open: {type: Boolean}
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.open = false
|
|
}
|
|
|
|
render() {
|
|
const classes = {
|
|
open: this.open
|
|
}
|
|
|
|
return html`
|
|
<aside class="${classMap(classes)}">
|
|
<div class="toggle-button-container">
|
|
<slot name="toggle-button" @click="${this._toggleOpen}"></slot>
|
|
</div>
|
|
<div class="padding">
|
|
<slot></slot>
|
|
</div>
|
|
</aside>
|
|
${this._bg()}
|
|
`
|
|
}
|
|
|
|
_bg() {
|
|
if(!this.open) return null
|
|
|
|
return html`<div class="bg" @click="${this._toggleOpen}"></div>`
|
|
}
|
|
|
|
_toggleOpen(event) {
|
|
// let button = event.target.closest('button')
|
|
let nodes = this.shadowRoot.querySelector('slot[name="toggle-button"]').assignedNodes()
|
|
let button = nodes.find(e => e.nodeName == 'BUTTON')
|
|
this.open = !this.open
|
|
|
|
button.classList.toggle('is-active', this.open)
|
|
button.setAttribute('aria-pressed', this.open.toString())
|
|
}
|
|
}
|