import * as interfaces from './interfaces/index.js'; import { DeesElement, TemplateResult, property, customElement, html, css, cssManager, } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; import '@designestate/dees-catalog'; @customElement('lele-appui-mainmenu') export class DeapMainmenu extends DeesElement { public static demo = () => html``; // INSTANCE // INSTANCE @property() public tabs: interfaces.ITab[] = [ { key: 'option 1', iconName: 'visibility', action: () => {} }, { key: 'option 2', iconName: 'alarm', action: () => {} }, { key: 'option 3', iconName: 'alarm', action: () => {} }, { key: 'option 4', iconName: 'alarm', action: () => {} }, ]; @property() public selectedTab: interfaces.ITab; public static styles = [ cssManager.defaultStyles, css` :host { color: #ccc; z-index: 10; display: block; position: relative; width: 80px; height: 100%; background: #3c3c3c; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); user-select: none; } .mainlogo { width: 80px; height: 80px; background: rgba(0, 0, 0, 0.4); } .tabsContainer { } .tab { padding-top: 18px; font-size: 24px; width: 80px; height: 80px; text-align: center; cursor: pointer; transition: color 0.1s, background 0.2s; } .tab:hover { background: rgba(0, 0, 0, 0.3); } .tab.selectedTab { color: #fff; background: rgba(0, 0, 0, 0.2); } .tab .label { font-size: 12px; margin-top: 4px; } .tabIndicator { background: #4e729a; position: absolute; width: 7px; height: 60px; left: 0px; top: 90px; 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`
${tabArg.key}
`; })}
`; } 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'); tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px'; } updateTab(tabArg: interfaces.ITab) { this.selectedTab = tabArg; this.updateTabIndicator(); this.selectedTab.action(); } firstUpdated() { this.updateTab(this.tabs[0]); } }