58 lines
1007 B
JavaScript
58 lines
1007 B
JavaScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
|
import Router from '../api/Router.js'
|
|
|
|
import './Button.js'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
class Header extends LitElement {
|
|
static properties = {}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
navHome() {
|
|
Router.navigate('/')
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<header>
|
|
<div>
|
|
<mm-button @click=${this.navHome}>back</mm-button>
|
|
</div>
|
|
|
|
<h1>${Router.route.title || ''}</h1>
|
|
|
|
</header>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
header {
|
|
padding-inline: 0.5em;
|
|
padding-block-end: 0.5em;
|
|
}
|
|
|
|
header > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
mm-button {
|
|
--primary-color: var(--green-400);
|
|
--background-color: var(--neutral-400);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
margin-block: 0.25em;
|
|
font-size: 1.75em;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-header', Header)
|