import * as plugins from './00plugins.js'; import * as interfaces from './interfaces/index.js'; import { DeesElement, type TemplateResult, property, customElement, html, css, cssManager, } from '@design.estate/dees-element'; import { DeesContextmenu } from './dees-contextmenu.js'; /** * the most left menu * usually used as organization selector */ @customElement('dees-appui-mainmenu') export class DeesAppuiMainmenu extends DeesElement { public static demo = () => html` console.log('Dashboard') }, { key: 'Projects', iconName: 'folder', action: () => console.log('Projects') }, { key: 'Analytics', iconName: 'lineChart', action: () => console.log('Analytics') }, { key: 'Settings', iconName: 'settings', action: () => console.log('Settings') }, ]} > `; // INSTANCE // INSTANCE @property({ type: Array }) public tabs: interfaces.ITab[] = [ { key: '⚠️ Please set tabs', iconName: 'alertTriangle', action: () => console.warn('No tabs configured for mainmenu') }, ]; @property() public selectedTab: interfaces.ITab; public static styles = [ cssManager.defaultStyles, css` .mainContainer { --menuSize: 60px; color: ${cssManager.bdTheme('#666', '#ccc')}; z-index: 10; display: block; position: relative; width: var(--menuSize); height: 100%; background: ${cssManager.bdTheme('#f5f5f5', '#000000')}; box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0, 0, 0, 0.1)', '0px 0px 5px rgba(0, 0, 0, 0.5)')}; user-select: none; border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')}; } .tabsContainer { } .tab { padding-top: 18px; font-size: 24px; width: var(--menuSize); height: var(--menuSize); text-align: center; transition: color 0.1s, background 0.2s; } .tab:hover { background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.15)')}; } .tab.selectedTab { color: ${cssManager.bdTheme('#000', '#fff')}; background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')}; } .tabIndicator { opacity: 0; background: ${cssManager.bdTheme('#2196f3', '#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`
{ DeesContextmenu.openContextMenuWithOptions(eventArg, [{ name: 'app settings', action: async () => {}, iconName: 'gear', }]) }}>
${this.tabs.map((tabArg) => { return html`
`; })}
`; } private 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})` ); if (!selectedTabElement) return; const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator'); if (!tabIndicator) return; 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(); // Emit tab-select event this.dispatchEvent(new CustomEvent('tab-select', { detail: { tab: tabArg }, bubbles: true, composed: true })); } firstUpdated() { this.updateTab(this.tabs[0]); } }