47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||
|
|
|
||
|
|
import * as domtools from '@designestate/dees-domtools';
|
||
|
|
import '@designestate/dees-catalog';
|
||
|
|
|
||
|
|
@customElement('deap-mainmenu')
|
||
|
|
export class DeapMainmenu extends DeesElement {
|
||
|
|
public static demo = () => html`<deap-mainmenu></deap-mainmenu>`;
|
||
|
|
|
||
|
|
// INSTANCE
|
||
|
|
public render (): TemplateResult {
|
||
|
|
return html`
|
||
|
|
${domtools.elementBasic.styles}
|
||
|
|
<style>
|
||
|
|
:host {
|
||
|
|
z-index: 10;
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
width: 80px;
|
||
|
|
height: 100%;
|
||
|
|
background: #3c3c3c;
|
||
|
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.5)
|
||
|
|
}
|
||
|
|
|
||
|
|
.maincontainer {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainlogo {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background: rgba(0,0,0,0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mainicon {}
|
||
|
|
</style>
|
||
|
|
<div class="maincontainer">
|
||
|
|
<div class="mainlogo">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="mainicon">
|
||
|
|
<dees-icon ></dees-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|