123 lines
2.5 KiB
JavaScript
123 lines
2.5 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 = {
|
|
path: { type: String },
|
|
navigation: { state: true }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.path = ''
|
|
this.navigation = []
|
|
}
|
|
|
|
firstUpdated() {
|
|
this.renderRoutes()
|
|
}
|
|
|
|
renderRoutes() {
|
|
const grouped = {}
|
|
const ungrouped = Router.routes.filter(r => !r.group && !r.hide)
|
|
|
|
Router.routes.forEach(r => {
|
|
if (r.group) {
|
|
if (!grouped[r.group]) {
|
|
grouped[r.group] = []
|
|
}
|
|
grouped[r.group].push(r)
|
|
}
|
|
})
|
|
|
|
|
|
const sortedArray = ungrouped
|
|
sortedArray.splice(1, 0, Object.values(grouped)[0])
|
|
sortedArray.splice(2, 0, Object.values(grouped)[1])
|
|
|
|
this.navigation = sortedArray
|
|
}
|
|
|
|
renderLink(r, first = false) {
|
|
return html`
|
|
${first && !r.disabled ? html`<span class="break"></span>` : '' }
|
|
${!r.disabled ? html`<a href=${r.path} class="${r.path == this.path ? 'selected' : ''}">
|
|
<mm-icon name=${r.icon}></mm-icon>
|
|
<span>
|
|
${r.short}
|
|
</span>
|
|
</a>` : '' }
|
|
`
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<footer>
|
|
<nav>
|
|
${this.navigation?.map(r => {
|
|
if (!r.hide) {
|
|
if (Array.isArray(r)) {
|
|
return r.map((r, i) => this.renderLink(r, i == 0))
|
|
} else {
|
|
return this.renderLink(r, r.path != '/')
|
|
}
|
|
}
|
|
})}
|
|
</nav>
|
|
</footer>`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
background: var(--neutral-200, white);
|
|
box-shadow: 0 0.5em 10px 10px #00000020;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
padding-block: 0.25em;
|
|
gap: 0.25em;
|
|
align-items: end;
|
|
padding-inline: 0.5em;
|
|
color: var(--green-400, blue);
|
|
text-decoration: none;
|
|
text-transform: capitalize;
|
|
|
|
& > span {
|
|
line-height: 0.9;
|
|
}
|
|
}
|
|
|
|
a > svg {
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-inline-end: 0.5em;
|
|
}
|
|
|
|
a.selected {
|
|
color: var(--neutral-900, black);
|
|
}
|
|
|
|
.break {
|
|
border-inline-start: thin solid var(--green-400);
|
|
}
|
|
|
|
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)
|