64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
|
import { LitElement, html, css } from 'lit';
|
||
|
|
import { property, state } from 'lit/decorators.js';
|
||
|
|
import { LinkIcon } from './icons';
|
||
|
|
|
||
|
|
export class MenuSubItem extends LitElement {
|
||
|
|
@property({ attribute: 'label' })
|
||
|
|
label: string;
|
||
|
|
|
||
|
|
@property({ attribute: 'icon-url' })
|
||
|
|
iconUrl: string;
|
||
|
|
|
||
|
|
@property({ attribute: 'link-url' })
|
||
|
|
linkUrl: string;
|
||
|
|
|
||
|
|
@property({ attribute: 'inactive', type: Boolean })
|
||
|
|
inactive: boolean;
|
||
|
|
|
||
|
|
static styles = css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
flex: 1;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 100ms ease-out;
|
||
|
|
border-bottom: 1px solid rgb(229,231,235);
|
||
|
|
padding: 5px 0 5px 7px;
|
||
|
|
border-left: 5px solid transparent;
|
||
|
|
}
|
||
|
|
:host([inactive]) {
|
||
|
|
cursor: initial;
|
||
|
|
}
|
||
|
|
:host(:hover) {
|
||
|
|
border-left: 5px solid #03A9F4;
|
||
|
|
background-color: rgb(28 169 247 / 10%);
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
font-size: 20px;
|
||
|
|
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
||
|
|
text-decoration: none;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-start;
|
||
|
|
height: 40px;
|
||
|
|
color: black;
|
||
|
|
}
|
||
|
|
.edge-menu-sub-item-icon {
|
||
|
|
height: 25px;
|
||
|
|
width: 25px;
|
||
|
|
}
|
||
|
|
.edge-menu-sub-item-label {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<a href="${this.linkUrl ? this.linkUrl : '#'}">
|
||
|
|
<img class="edge-menu-sub-item-icon" src="${this.iconUrl ? this.iconUrl : LinkIcon}" />
|
||
|
|
<span class="edge-menu-sub-item-label">${this.label}</span>
|
||
|
|
</a>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
}
|