@exmg/exm-navigation 1.0.3 → 1.1.1

package/src/exm-navigation-base.js

@@ -1,85 +1,320 @@
 import { __decorate } from "tslib";
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import { LitElement, html } from 'lit';
-import { navigationDrawerHover, navigationDrawerPersistent, navigationItemHover, navigationRailActive, navigationRailSelected, navigationSubSelected, } from './exm-navigation-signals.js';
-import { property, query } from 'lit/decorators.js';
-// eslint-disable-next-line
-export class ExmNavigationBase extends SignalWatcher(LitElement) {
+import { html, nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { MediaQueries } from './mixins/media-queries.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { style } from './styles/exm-navigation-css.js';
+import './exm-navigation-icon-button.js';
+import './exm-navigation-topbar.js';
+import './exm-navigation-rail.js';
+import './exm-navigation-sub-menu.js';
+import './exm-navigation-drawer-menu.js';
+import './exm-navigation-drawer.js';
+// eslint-disable-next-line new-cap
+export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     constructor() {
         super(...arguments);
-        this.pageId = 'chat';
+        this.items = [];
+        this.path = ['chat'];
+        this.drawerWidth = 319;
+        this.persistent = true;
+        this.selectedItem = [];
+        this.activeItem = [];
+        this.railOpen = true;
+        this.drawerOpen = false;
+        this.drawerHover = false;
+        this.navigationHasSubmenu = {};
         this.menu = [];
         this.expandedItems = {};
+        this.unSubscribeSelected = () => { };
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
+        if (changedProperties.has('items')) {
+            for (const item of this.items) {
+                this.navigationHasSubmenu[item.id] = (item.items || []).length > 0;
+            }
+            if (this.navigationHasSubmenu[this.path[0]] && this.persistent) {
+                this.drawerOpen = true;
+            }
+        }
+    }
+    firstUpdated(changedProperties) {
+        if (changedProperties.has('media')) {
+            this.handleMediaTypeChange.bind(this)();
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        navigationRailSelected.value = this.pageId;
-        navigationRailActive.value = this.pageId;
+        this.selectedItem = [...this.path];
+        this.activeItem = [...this.path];
     }
-    isSubMenuExpanded(id) {
-        return !!this.expandedItems[id];
+    /**
+     * Set the correct values when the media changes.
+     */
+    handleMediaTypeChange() {
+        this.persistent = this.media === 'desktop';
+        this.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.selectedItem[0]];
+        this.railOpen = this.media !== 'mobile';
     }
-    toggleExpanded(id) {
-        const expanded = this.isSubMenuExpanded(id);
-        this.expandedItems[id] = !expanded;
-        this.requestUpdate();
+    loadPage(path) {
+        this.path = path;
+        this.selectedItem = path;
+        this.fire('navigation-change', path);
     }
-    getItemsFromParentId(id) {
+    /**
+     * Handle Rail item click or Drawer sub menu click.
+     * If the selected menu item has children, we add the first item to the list (as per Google implementation).
+     * In this case we also do not close the drawer in non persistent mode, so the user is able to select a next level in the menu
+     */
+    handleRailItemClick({ detail }) {
         var _a;
-        return ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
-    }
-    getActiveSubmenuParent() {
-        // On hover show howver content and otherwise show the selected submenu
-        const parentId = !navigationItemHover.value && !navigationDrawerHover.value
-            ? navigationRailSelected.value
-            : navigationRailActive.value;
-        if (parentId === null) {
-            return null;
+        if (this.selectedItem[0] !== detail) {
+            const items = ((_a = this.items.find((item) => item.id === detail)) === null || _a === void 0 ? void 0 : _a.items) || [];
+            if (items.length) {
+                this.selectedItem = [detail, items[0].id];
+            }
+            else {
+                this.selectedItem = [detail];
+            }
+            // copy the selected item to the active item
+            this.activeItem = this.selectedItem;
+            /**
+             * If persistent menu close the drawer when a item is clicked and does not has children items
+             */
+            if (this.persistent) {
+                this.drawerOpen = items.length > 0 || this.navigationHasSubmenu[detail];
+            }
+            else if (items.length === 0) {
+                this.drawerOpen = false;
+            }
+            this.loadPage(this.selectedItem);
         }
-        return parentId;
     }
-    loadPage(id) {
-        this.pageId = id;
-    }
-    handlSubMenuBackClick() {
-        navigationRailActive.value = null;
-    }
-    handleNavigationSubClicked(i, parentId) {
-        navigationRailSelected.value = parentId;
-        if ((i.items || []).length > 0) {
-            this.toggleExpanded(i.id);
+    /**
+     * Handle the mouse enter of the rail item.
+     */
+    handleRailItemMouseEnter({ detail }) {
+        if (this.navigationHasSubmenu[detail]) {
+            this.drawerOpen = true;
+            if (detail !== this.selectedItem[0]) {
+                this.activeItem = [detail];
+                return;
+            }
+        }
+        else if (this.navigationHasSubmenu[this.selectedItem[0]] && this.persistent) {
+            this.activeItem = this.selectedItem;
+            this.drawerOpen = true;
         }
         else {
-            navigationSubSelected.value = i.id;
-            this.loadPage(navigationSubSelected.value);
+            this.activeItem = this.selectedItem;
+            this.drawerOpen = false;
         }
+        this.activeItem = this.selectedItem;
     }
-    handleRailClick(id) {
-        var _a;
-        if (navigationRailSelected.value !== id) {
-            // Set new selected rail item
-            navigationRailSelected.value = id;
-            // Reset selected sub menu item
-            navigationSubSelected.value = null;
-            const items = ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
-            if (items.length > 0) {
-                navigationRailActive.value = id;
-            }
-            // If persistent menu close the drawer when a item is clicked and does not has children items
-            if (navigationDrawerPersistent.value) {
-                this.drawer.open = items.length > 0 ? true : false;
-            }
-            this.loadPage(navigationRailSelected.value);
+    /**
+     * Handle the mouse leave of the rail item.
+     * If the item has no submenu and the current selected item has no submenu, it is safe to close the drawer
+     */
+    handleRailItemMouseLeave({ detail }) {
+        if (!this.navigationHasSubmenu[detail] && !this.navigationHasSubmenu[this.selectedItem[0]]) {
+            this.drawerOpen = false;
+        }
+        if (!this.persistent && !this.navigationHasSubmenu[detail]) {
+            this.drawerOpen = false;
+        }
+    }
+    /**
+     * Handle drawer mouse leave. Should close the drawer
+     */
+    handleDrawerMouseLeave() {
+        if (!this.navigationHasSubmenu[this.selectedItem[0]] || !this.persistent) {
+            this.drawerOpen = false;
         }
+        /**
+         * On mouse leave the drawer we want to set the active item to the selected item.
+         * If not, it will show the active item on every hover and will make navigating in the selected item impossible
+         */
+        this.activeItem = this.selectedItem;
+    }
+    /**
+     * Handle the click on a sub menu item
+     * @param param Contains detail. This has the new path to go to.
+     * If the rail is hidden and the selected item has no children, we close the drawer
+     */
+    handleSubMenuClick({ detail }) {
+        this.selectedItem = detail;
+        this.activeItem = detail;
+        if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
+            this.drawerOpen = false;
+        }
+    }
+    /**
+     * Handle the topbar menu click.
+     * Clicking the menu button in the topbar wil toggle the drawer
+     */
+    handleTopbarMenuClick() {
+        this.drawerOpen = !this.drawerOpen;
+    }
+    /**
+     * Handle the drawer back button click.
+     * This should reset the active item, so the root-level menu gets triggered
+     */
+    handleDrawerBackClick() {
+        this.activeItem = [];
+    }
+    /**
+     * Check if the passed paths last item has children yes or no
+     * @param path Path array
+     * @returns True if the given path has children
+     */
+    currentSelectedHasChildren(path) {
+        let currentItems = this.items;
+        return path.reduce((_, pathSection) => {
+            const item = currentItems.find((currentItem) => currentItem.id === pathSection);
+            currentItems = (item === null || item === void 0 ? void 0 : item.items) || [];
+            return ((item === null || item === void 0 ? void 0 : item.items) || []).length > 0;
+        }, false);
+    }
+    /**
+     * When the rail is not open, show the menu button on top of the drawer to close it
+     */
+    renderDrawerMenuButton() {
+        return !this.railOpen
+            ? html `
+          <section>
+            <exm-navigation-icon-button
+              icon=${this.drawerOpen ? 'menu_open' : 'menu'}
+              @navigation-icon-button-click=${this.handleTopbarMenuClick}
+            ></exm-navigation-icon-button>
+          </section>
+        `
+            : nothing;
+    }
+    /**
+     * When no menu item selected, ot only toplevel without children, show the start menu (same as in the rail)
+     * If more levels deep, show the back button
+     */
+    renderStartMenu() {
+        return !this.railOpen &&
+            (this.activeItem.length === 0 ||
+                (this.activeItem.length === 1 && !this.currentSelectedHasChildren(this.activeItem)))
+            ? html `<exm-navigation-drawer-menu
+          .items=${this.items}
+          .path=${this.activeItem}
+          @drawer-menu-item-click=${this.handleRailItemClick}
+        ></exm-navigation-drawer-menu>`
+            : !this.railOpen
+                ? html `
+            <section>
+              <exm-navigation-icon-button
+                icon="arrow_back"
+                label="Main menu"
+                @navigation-icon-button-click=${this.handleDrawerBackClick}
+              ></exm-navigation-icon-button>
+            </section>
+          `
+                : nothing;
+    }
+    /**
+     * return the sub menus. More then 1 level deep
+     */
+    renderDrawerSubMenu() {
+        return html `
+      <exm-navigation-sub-menu
+        .items=${this.items}
+        .path=${this.activeItem}
+        @sub-menu-item-click=${this.handleSubMenuClick}
+      ></exm-navigation-sub-menu>
+    `;
+    }
+    /**
+     * Return the Rail
+     */
+    renderRail() {
+        return html `<exm-navigation-rail
+      .items=${this.items}
+      .selected=${this.selectedItem}
+      @rail-item-click=${this.handleRailItemClick}
+      @rail-item-mouseenter=${this.handleRailItemMouseEnter}
+      @rail-item-mouseleave=${this.handleRailItemMouseLeave}
+    >
+      <slot name="rail-top" slot="rail-top"></slot>
+      <slot name="rail-bottom" slot="rail-bottom"></slot>
+    </exm-navigation-rail>`;
+    }
+    /**
+     * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
+     */
+    renderTopbar() {
+        return html `<exm-navigation-topbar ?drawer-open=${this.drawerOpen} @topbar-menu-click=${this.handleTopbarMenuClick}>
+      <slot name="topbar-title" slot="topbar-title"></slot>
+      <slot name="topbar-actions" slot="topbar-actions"></slot>
+    </exm-navigation-topbar>`;
     }
     render() {
-        return html ``;
+        var _a;
+        const containerStyle = {
+            '--exm-drawer-width': `${(((_a = this.items.find((item) => item.id === this.selectedItem[0])) === null || _a === void 0 ? void 0 : _a.items) || []).length > 0 && this.persistent ? this.drawerWidth : 0}px`,
+        };
+        const containerClass = { 'show-topbar': !this.railOpen };
+        return html `
+      <section
+        class="navigation-container ${classMap(containerClass)}"
+        id="navigation-container"
+        style=${styleMap(containerStyle)}
+      >
+        ${this.railOpen ? this.renderRail() : this.renderTopbar()}
+        <exm-navigation-drawer ?open=${this.drawerOpen} @drawer-mouseleave=${this.handleDrawerMouseLeave}>
+          ${[this.renderDrawerMenuButton(), this.renderStartMenu(), this.renderDrawerSubMenu()]}
+        </exm-navigation-drawer>
+        <section class="content">
+          <slot></slot>
+        </section>
+      </section>
+      <slot></slot>
+    `;
     }
 }
+ExmNavigationBase.styles = [style];
 __decorate([
-    property({ type: String })
-], ExmNavigationBase.prototype, "pageId", void 0);
+    property({ type: Array })
+], ExmNavigationBase.prototype, "items", void 0);
 __decorate([
-    query('#drawer')
+    property({ type: Array })
+], ExmNavigationBase.prototype, "path", void 0);
+__decorate([
+    property({ type: Number, attribute: 'drawer-width' })
+], ExmNavigationBase.prototype, "drawerWidth", void 0);
+__decorate([
+    query('exm-navigation-drawer')
 ], ExmNavigationBase.prototype, "drawer", void 0);
+__decorate([
+    query('#navigation-container')
+], ExmNavigationBase.prototype, "navContent", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "persistent", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "selectedItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "activeItem", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "railOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "drawerOpen", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "drawerHover", void 0);
+__decorate([
+    state()
+], ExmNavigationBase.prototype, "navigationHasSubmenu", void 0);
 //# sourceMappingURL=exm-navigation-base.js.map

package/src/exm-navigation-drawer-base.d.ts

@@ -1,29 +1,14 @@
-import { LitElement } from 'lit';
-import '@material/mwc-drawer';
 import { Drawer } from '@material/mwc-drawer';
-declare const ExmNavigationDrawerBase_base: typeof LitElement;
-export declare class ExmNavigationDrawerBase extends ExmNavigationDrawerBase_base {
+import { ExmgElement } from '@exmg/lit-base';
+import '@material/mwc-drawer';
+export declare class ExmNavigationDrawerBase extends ExmgElement {
     open: boolean;
-    drawer?: Drawer;
     persistent: boolean;
-    hoverIn: () => void;
-    handleClose: () => void;
-    hoverOut: () => void;
-    private _itemHover;
-    private _drawerHover;
-    private _asideElement?;
-    private _observer;
-    hasActiveSubmenu(): boolean;
-    updateInlineStyles(): void;
-    constructor();
-    disconnectedCallback(): void;
-    toggle(): void;
-    _handleClose(): void;
-    _hoverIn(): void;
-    _hoverOut(): void;
-    hidemenu(): void;
-    protected updated(): void;
+    drawer?: Drawer;
+    static styles: import("lit").CSSResult[];
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleDrawerClose;
     protected firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};

package/src/exm-navigation-drawer-base.js

@@ -1,173 +1,49 @@
 import { __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { style } from './styles/exm-navigation-drawer-css.js';
 import '@material/mwc-drawer';
-import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import { navigationDrawerHover, navigationItemHover, navigationDrawerOpen, navigationRailHidden, navigationDrawerPersistent, navigationActiveHasSubmenu, } from './exm-navigation-signals.js';
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import { observer } from '@exmg/lit-base';
-// eslint-disable-next-line
-export class ExmNavigationDrawerBase extends SignalWatcher(LitElement) {
-    hasActiveSubmenu() {
-        let activeHasSubMenu = false;
-        for (const key in navigationActiveHasSubmenu.value) {
-            // eslint-disable-next-line
-            if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && navigationActiveHasSubmenu.value[key]) {
-                activeHasSubMenu = true;
-            }
-        }
-        return activeHasSubMenu;
-    }
-    updateInlineStyles() {
-        const drawer = this.drawer;
-        if (drawer) {
-            const shadowRoot = drawer.shadowRoot;
-            const asideElement = shadowRoot.querySelector('aside');
-            if (asideElement) {
-                asideElement.style.left = navigationRailHidden.value ? '0px' : 'var(--_exm-navigation-rail-nav-width)';
-            }
-            const contentElement = shadowRoot.querySelector('div.mdc-drawer-app-content');
-            if (contentElement) {
-                // @ts-ignore
-                contentElement.style.marginLeft = navigationRailHidden.value
-                    ? '0px'
-                    : this.open
-                        ? 'var(--mdc-drawer-width, 256px)'
-                        : '0px';
-            }
-        }
-    }
+export class ExmNavigationDrawerBase extends ExmgElement {
     constructor() {
-        super();
+        super(...arguments);
         this.open = false;
         this.persistent = false;
-        this._itemHover = false;
-        this._drawerHover = false;
-        // @ts-ignore
-        this._observer = new ResizeController(this, {
-            target: window.document.body,
-            callback: (entries) => {
-                const entry = entries.pop();
-                if (!entry || !entry.contentRect)
-                    return;
-                const width = entry.contentRect.width;
-                const persistentWidth = width > 1560;
-                const activeHasSubMenu = this.hasActiveSubmenu();
-                // If root nav item set and has submenu and persistent width meets the criteria
-                const persistent = activeHasSubMenu && persistentWidth;
-                if (this.persistent !== persistent) {
-                    if (!persistent) {
-                        this.open = false;
-                    }
-                    else {
-                        this.open = true;
-                    }
-                    this.persistent = persistent;
-                }
-                navigationRailHidden.value = width < 961;
-                this.updateInlineStyles();
-            },
-        });
-        // Bind methods to ensure the correct 'this' context
-        this.hoverIn = this._hoverIn.bind(this);
-        this.hoverOut = this._hoverOut.bind(this);
-        this.handleClose = this._handleClose.bind(this);
-    }
-    disconnectedCallback() {
-        // Clean up listeners
-        this._asideElement.removeEventListener('mouseenter', this.hoverIn);
-        this._asideElement.removeEventListener('mouseleave', this.hoverOut);
-        this.removeEventListener('drawer-close', this.handleClose);
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-    _handleClose() {
-        this.open = false;
     }
-    _hoverIn() {
-        navigationDrawerHover.value = true;
+    handleMouseEnter() {
+        this.fire('drawer-mouseenter');
     }
-    _hoverOut() {
-        navigationDrawerHover.value = false;
+    handleMouseLeave() {
+        this.fire('drawer-mouseleave');
     }
-    hidemenu() {
-        // Hide submenu when drawer is not persistent when mouse leaves the drawer or menu items
-        if (!this._itemHover && !this._drawerHover && !(this.persistent && this.hasActiveSubmenu())) {
-            this.open = false;
-        }
-    }
-    updated() {
-        if (this._itemHover !== navigationItemHover.value) {
-            this._itemHover = navigationItemHover.value;
-            if (this._itemHover) {
-                this.open = true;
-            }
-            if (!this._itemHover) {
-                // Timeout to allow for mouse transition to the content element
-                setTimeout(this.hidemenu.bind(this), 100);
-            }
-            else {
-                this.hidemenu();
-            }
-        }
-        if (this._drawerHover !== navigationDrawerHover.value) {
-            this._drawerHover = navigationDrawerHover.value;
-            this.hidemenu();
-        }
+    handleDrawerClose() {
+        this.fire('drawer-mouseleave');
     }
     async firstUpdated() {
+        var _a;
         await this.updateComplete;
-        const drawer = this.drawer;
-        if (drawer) {
-            const shadowRoot = drawer.shadowRoot;
-            if (shadowRoot) {
-                const asideElement = shadowRoot.querySelector('aside');
-                if (asideElement) {
-                    // Hack custom styles in the aside element
-                    asideElement.style.borderRightWidth = '0px';
-                    asideElement.style.borderRadius = '0px 16px 16px 0px';
-                    asideElement.style.top = '0px';
-                    asideElement.style.bottom = '0px';
-                    asideElement.style.height = 'unset';
-                    asideElement.style.transitionProperty = 'transform, box-shadow';
-                    asideElement.style.transitionDuration = '300ms';
-                    asideElement.style.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
-                    asideElement.style.background = `var(--md-sys-color-surface-container)`;
-                    asideElement.style.borderLeft = '1px solid var(--md-sys-color-outline-variant)';
-                    asideElement.style.left = 'var(--_exm-navigation-rail-nav-width)';
-                    // Add event listeners to the aside element
-                    asideElement.addEventListener('mouseenter', this.hoverIn);
-                    asideElement.addEventListener('mouseleave', this.hoverOut);
-                    this._asideElement = asideElement;
-                }
+        if ((_a = this.drawer) === null || _a === void 0 ? void 0 : _a.shadowRoot) {
+            const asideElement = this.drawer.shadowRoot.querySelector('aside');
+            if (asideElement) {
+                // Add event listeners to the aside element
+                asideElement.addEventListener('mouseenter', this.handleMouseEnter.bind(this));
+                asideElement.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
             }
         }
-        this.addEventListener('drawer-close', this.handleClose);
+        this.addEventListener('drawer-close', this.handleDrawerClose.bind(this));
     }
     render() {
-        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
-      <div class="content">
-        <slot></slot>
-      </div>
-      <slot name="appContent" slot="appContent"></slot>
-    </mwc-drawer>`;
+        return html `<mwc-drawer type="dismissible" ?open=${this.open}><slot></slot></mwc-drawer>`;
     }
 }
+ExmNavigationDrawerBase.styles = [style];
 __decorate([
-    property({ type: Boolean }),
-    observer(function (value) {
-        navigationDrawerOpen.value = value;
-        this.updateInlineStyles();
-    })
+    property({ type: Boolean })
 ], ExmNavigationDrawerBase.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmNavigationDrawerBase.prototype, "persistent", void 0);
 __decorate([
     query('mwc-drawer')
 ], ExmNavigationDrawerBase.prototype, "drawer", void 0);
-__decorate([
-    property({ type: Boolean }),
-    observer(function (value) {
-        navigationDrawerPersistent.value = value;
-    })
-], ExmNavigationDrawerBase.prototype, "persistent", void 0);
 //# sourceMappingURL=exm-navigation-drawer-base.js.map

package/src/exm-navigation-drawer-menu-base.d.ts

@@ -0,0 +1,12 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+import './exm-navigation-rail-nav-item.js';
+import './exm-navigation-drawer-nav-item.js';
+import '@material/web/list/list.js';
+import '@exmg/exm-collapsed/exm-collapsed.js';
+export declare class ExmNavigationDrawerMenuBase extends ExmgElement {
+    items: MenuItem[];
+    path: string[];
+    private handleDrawerMenuItemClick;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-navigation-drawer-menu-base.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import './exm-navigation-rail-nav-item.js';
+import './exm-navigation-drawer-nav-item.js';
+import '@material/web/list/list.js';
+import '@exmg/exm-collapsed/exm-collapsed.js';
+export class ExmNavigationDrawerMenuBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = [];
+    }
+    handleDrawerMenuItemClick(path) {
+        this.fire('drawer-menu-item-click', path);
+    }
+    render() {
+        return html `<div class="top"><slot name="top"></slot></div>
+      <nav class="nav">
+        <md-list>
+          ${repeat(this.items || [], ({ id }) => id, (item) => html `
+              <exm-navigation-drawer-nav-item
+                type="button"
+                @click=${this.handleDrawerMenuItemClick.bind(this, item.id)}
+                ?has-submenu=${(item.items || []).length > 0}
+                ?selected=${item.id === this.path[0]}
+                icon=${item.icon || ''}
+              >
+                ${item.label}
+              </exm-navigation-drawer-nav-item>
+            `)}
+        </md-list>
+      </nav>
+      <div class="bottom"><slot name="bottom"></slot></div>`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], ExmNavigationDrawerMenuBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationDrawerMenuBase.prototype, "path", void 0);
+//# sourceMappingURL=exm-navigation-drawer-menu-base.js.map