import * as interfaces from './interfaces/index.js'; import { DeesElement, type TemplateResult, property, customElement, html, css, cssManager, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; import '@design.estate/dees-catalog'; /** * the most left menu * usually used as organization selector */ @customElement('lele-appui-mainmenu') export class DeapMainmenu extends DeesElement { public static demo = () => html``; // INSTANCE // INSTANCE @property() public tabs: interfaces.ITab[] = [ { key: 'option 1', iconName: 'building', action: () => {} }, { key: 'option 2', iconName: 'building', action: () => {} }, { key: 'option 3', iconName: 'building', action: () => {} }, { key: 'option 4', iconName: 'building', action: () => {} }, ]; @property() public selectedTab: interfaces.ITab; public static styles = [ cssManager.defaultStyles, css` :host { --menuSize: 60px; color: #ccc; z-index: 10; display: block; position: relative; width: var(--menuSize); height: 100%; background: #000000; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); user-select: none; border-right: 1px solid #202020; } .mainlogo { width: var(--menuSize); height: var(--menuSize); background: rgba(0, 0, 0, 0.4); } .tabsContainer { } .tab { padding-top: 18px; font-size: 24px; width: var(--menuSize); height: var(--menuSize); text-align: center; cursor: pointer; transition: color 0.1s, background 0.2s; } .tab:hover { background: rgba(255, 255, 255, 0.15); } .tab.selectedTab { color: #fff; background: rgba(255, 255, 255, 0.1); } .tabIndicator { opacity: 0; background: #4e729a; position: absolute; width: 5px; height: calc((var(--menuSize) / 3) * 2); left: 0px; top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2)); border-top-right-radius: 7px; border-bottom-right-radius: 7px; transition: all 0.1s; } `, ]; public render(): TemplateResult { return html`
${this.tabs.map((tabArg) => { return html`
`; })}
`; } private async updateTabIndicator() { let selectedTab = this.selectedTab; if (!selectedTab) { selectedTab = this.tabs[0]; } const tabIndex = this.tabs.indexOf(selectedTab); const selectedTabElement: HTMLElement = this.shadowRoot.querySelector( `.tabsContainer .tab:nth-child(${tabIndex + 1})` ); const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator'); const offsetTop = selectedTabElement.offsetTop; tabIndicator.style.opacity = `1`; tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`; } updateTab(tabArg: interfaces.ITab) { this.selectedTab = tabArg; this.updateTabIndicator(); this.selectedTab.action(); } firstUpdated() { this.updateTab(this.tabs[0]); } }