152 lines
3.3 KiB
JavaScript
152 lines
3.3 KiB
JavaScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
|
import Router from '../api/Router'
|
|
|
|
import './SvgIcon.js'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
class NavCard extends LitElement {
|
|
static properties = {
|
|
route: { type: Object }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.route = {}
|
|
}
|
|
|
|
firstUpdated() {
|
|
console.log(this.route)
|
|
this.shadowRoot.host.addEventListener('click', () => {
|
|
if (!this.route.disabled) {
|
|
Router.navigate(this.route.path)
|
|
}
|
|
})
|
|
}
|
|
|
|
navigate(path) {
|
|
if (!this.route.disabled) {
|
|
path = path || this.route.path
|
|
Router.navigate(path)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="card">
|
|
${Array.isArray(this.route) ? html`
|
|
<header class="title">
|
|
<span>${this.route[0].group}</span>
|
|
</header>
|
|
${this.route.map(r =>
|
|
!r.disabled ? html`
|
|
<button @click=${() => this.navigate(r.path)}>
|
|
<mm-icon name=${r.icon}></mm-icon>
|
|
${r.title}
|
|
</button>
|
|
` : ''
|
|
)}
|
|
`
|
|
:
|
|
html`
|
|
<header class="title">
|
|
<span>${this.route?.title}</span>
|
|
</header>
|
|
<button class="iconOnly" @click=${this.navigate}>
|
|
${!this.route.disabled ? html`<mm-icon name=${this.route.icon}></mm-icon>` : html`<span>coming soon...</span>`}
|
|
</button>
|
|
`
|
|
}
|
|
</div>
|
|
`
|
|
}
|
|
|
|
static styles = [css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
--highlight-color: black;
|
|
--shadow: 0 0 0px transparent;
|
|
--inline-padding: 0.85em;
|
|
--block-padding: 1em;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, rgb(255 255 255 / 0.9) 0%, rgb(159 159 159 / 0.6) 100%);
|
|
border-radius: 0.75em;
|
|
box-shadow: 0px 0px 10px #00000060;
|
|
text-shadow: var(--shadow);
|
|
}
|
|
|
|
.card {
|
|
display: grid;
|
|
grid-auto-flow: rows;
|
|
gap: 0.5em;
|
|
margin-inline: var(--inline-padding);
|
|
cursor: pointer;
|
|
font-size: 1.65em;
|
|
}
|
|
|
|
mm-icon {
|
|
--svg-shadow: var(--shadow);
|
|
margin-inline-end: 0.5em;
|
|
font-size: 0.8em;
|
|
color: currentcolor;
|
|
}
|
|
|
|
.title {
|
|
padding-bottom: 0.75em;
|
|
margin-block-start: 1em;
|
|
font-size: 0.75em;
|
|
text-align: center;
|
|
border-bottom: thin solid var(--highlight-color);
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 2.5em;
|
|
|
|
& > span {
|
|
display: block;
|
|
max-width: 18ch;
|
|
margin-inline: auto;
|
|
}
|
|
}
|
|
|
|
button {
|
|
display: grid;
|
|
grid-template-columns: 1em auto;
|
|
gap: 0.25em;
|
|
width: 100%;
|
|
background: var(--green-inside-gradient-400);
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
font-size: 0.75em;
|
|
color: white;
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
text-shadow: 0 0 5px #ffffff;
|
|
margin: 0;
|
|
|
|
&:has(span) {
|
|
background: var(--neutral-gradient-600);
|
|
}
|
|
|
|
&.iconOnly {
|
|
display: flex;
|
|
gap: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5em;
|
|
padding: 1em;
|
|
|
|
& > span {
|
|
font-size: 0.5em;
|
|
}
|
|
}
|
|
|
|
& mm-icon {
|
|
margin: 0;
|
|
padding: 0;
|
|
--svg-shadow: 0 0 5px #ffffff;
|
|
}
|
|
}
|
|
`]
|
|
}
|
|
|
|
customElements.define('mm-ncard', NavCard)
|