72 lines
1.4 KiB
JavaScript
72 lines
1.4 KiB
JavaScript
import { LitElement, css, html, unsafeCSS } from 'lit'
|
|
import Router from '../api/Router'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
import './SvgIcon.js'
|
|
|
|
class Footer extends LitElement {
|
|
static properties = {}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<footer>
|
|
<nav>
|
|
${Router.routes.map(r => !r.hide ? html`
|
|
<a href=${r.path} class=${r.path == Router.route.path ? 'selected' : ''}>
|
|
<mm-icon name=${r.icon}></mm-icon>
|
|
${r.short}
|
|
</a>` : '') }
|
|
</nav>
|
|
</footer>`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
background: var(--neutral-200, white);
|
|
box-shadow: 0 0.5em 10px 10px #00000020;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
color: var(--green-400, blue);
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
a > svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
a.selected {
|
|
color: var(--neutral-900, black);
|
|
}
|
|
|
|
.unicon {
|
|
width: 1em;
|
|
height: 1em;
|
|
outline: thin solid red;
|
|
}
|
|
|
|
footer {
|
|
padding-inline: 0.5em;
|
|
padding-block-start: 0.5em;
|
|
padding-block-end: 0.75em;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-footer', Footer)
|