import * as plugins from './plugins.js'; import { cssManager, css, customElement, DeesElement, domtools, html, property, } from '@designestate/dees-element'; import { DeesWindowLayer } from './dees-windowlayer.js'; @customElement('dees-mobilenavigation') export class DeesMobilenavigation extends DeesElement { private static singletonRef: DeesMobilenavigation; public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) { if (!this.singletonRef) { this.singletonRef = new DeesMobilenavigation(); document.body.append(this.singletonRef); await this.singletonRef.init(); } this.singletonRef.menuItems = menuItemsArg; await this.singletonRef.readyDeferred.promise; this.singletonRef.show(); return this.singletonRef; } // INSTANCE @property({ type: Object, }) public menuItems: plugins.tsclass.website.IMenuItem[] = []; readyDeferred = domtools.plugins.smartpromise.defer(); /** * inits the mobile navigation */ public async init() { await this.updateComplete; this.readyDeferred.resolve(); } public static styles = [ cssManager.defaultStyles, css` :host { } .main { transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; position: fixed; height: 100vh; min-width: 370px; transform: translateX(200px); color: #fff; z-index: 100; opacity: 0; padding: 16px; right: 0px; background: #000; border-left: 1px dashed #444; pointer-events: none; } .main.show { pointer-events: all; transform: translateX(0px); opacity: 1; } .menuItem { text-align: center; padding: 8px; cursor: pointer; border-radius: 3px; } .menuItem:hover { background: #333; } `, ]; public render() { return html`