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>
    `;
  }
}