68 lines
1.4 KiB
JavaScript
68 lines
1.4 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() {
|
|
this.shadowRoot.host.addEventListener('click', () => {
|
|
Router.navigate(this.route.path)
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="card">
|
|
<mm-icon name=${this.route?.icon}></mm-icon>
|
|
<p class="title">${this.route?.title}</p>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
static styles = [css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
--highlight-color: black;
|
|
--shadow: 0 0 0px transparent;
|
|
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;
|
|
padding: 1em;
|
|
padding-block-start: 1.25em;
|
|
box-shadow: 0px 0px 10px #00000060;
|
|
text-shadow: var(--shadow);
|
|
}
|
|
|
|
.card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
border-top: thin solid var(--highlight-color);
|
|
padding-block-start: 0.3em;
|
|
cursor: pointer;
|
|
font-size: 1.65em;
|
|
}
|
|
|
|
mm-icon {
|
|
--svg-shadow: var(--shadow);
|
|
margin-inline-end: 0.5em;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.title {
|
|
max-width: 12ch;
|
|
}
|
|
`]
|
|
}
|
|
|
|
customElements.define('mm-ncard', NavCard)
|