@exmg/exm-navigation 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@exmg/lit-base": "^3.0.0",
+    "@lit-labs/motion": "^1.0.7",
     "@material/mwc-drawer": "^0.27.0",
     "@material/mwc-top-app-bar-fixed": "^0.27.0",
     "@material/web": "^2.2.0",
@@ -51,5 +52,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b00599f5b5bfb37b7bd248e612d461db1f2cdb63"
+  "gitHead": "b7a2332237126f8df4b270b2685a45265c684cc0"
 }

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

@@ -10,6 +10,7 @@ import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
 declare const ExmNavigationBase_base: (new (...args: any[]) => {
     media: "mobile" | "tablet" | "desktop";
+    touch: boolean;
 }) & typeof ExmgElement;
 export declare class ExmNavigationBase extends ExmNavigationBase_base {
     items: MenuItem[];
@@ -18,32 +19,46 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
     disableNavigate: boolean;
     drawer?: ExmNavigationDrawer;
     navContent?: HTMLDivElement;
-    persistent: boolean;
+    /**
+     * The menu item triggered by hovering and entering submenu's
+     * Once an item with endpoint is clicked, this value should be written to activeItem
+     */
     selectedItem: string[];
+    /**
+     * The currently active menu item
+     */
     activeItem: string[];
+    /**
+     * Wether or not the rail should be visible yes or no
+     */
     railOpen: boolean;
+    /**
+     * Wether or not the drawer should be visible yes or no
+     */
     drawerOpen: boolean;
-    drawerHover: boolean;
+    /**
+     * Object with menuitem and a bool for having that path sub items yes or no
+     */
     navigationHasSubmenu: Record<string, boolean>;
     static styles: import("lit").CSSResult[];
-    menu: MenuItem[];
-    expandedItems: {
-        [k: string]: boolean;
-    };
-    unSubscribeSelected: () => void;
     protected updated(changedProperties: PropertyValues): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
     /**
      * Set the correct values when the media changes.
      */
-    handleMediaTypeChange(): void;
+    private handleMediaTypeChange;
     private getPathEndpoint;
-    loadPage(path: string[]): void;
+    private loadPage;
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce }?: Record<string, boolean>): void;
     /**
      * 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
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
      */
     private handleRailItemClick;
     /**
@@ -102,6 +117,13 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      * Render the topbar. This is displayed on mobile and contains the menu button and a slot for the title
      */
     private renderTopbar;
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    private getDrawerWidth;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/src/exm-navigation-base.js

@@ -20,16 +20,27 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.path = ['chat'];
         this.drawerWidth = 319;
         this.disableNavigate = false;
-        this.persistent = true;
+        /**
+         * The menu item triggered by hovering and entering submenu's
+         * Once an item with endpoint is clicked, this value should be written to activeItem
+         */
         this.selectedItem = [];
+        /**
+         * The currently active menu item
+         */
         this.activeItem = [];
+        /**
+         * Wether or not the rail should be visible yes or no
+         */
         this.railOpen = true;
+        /**
+         * Wether or not the drawer should be visible yes or no
+         */
         this.drawerOpen = false;
-        this.drawerHover = false;
+        /**
+         * Object with menuitem and a bool for having that path sub items yes or no
+         */
         this.navigationHasSubmenu = {};
-        this.menu = [];
-        this.expandedItems = {};
-        this.unSubscribeSelected = () => { };
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -39,7 +50,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
             for (const item of this.items) {
                 this.navigationHasSubmenu[item.id] = (item.items || []).length > 0;
             }
-            if (this.navigationHasSubmenu[this.path[0]] && this.persistent) {
+            if (this.navigationHasSubmenu[this.path[0]] && this.media === 'desktop') {
                 this.drawerOpen = true;
             }
         }
@@ -58,8 +69,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * 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.drawerOpen = this.media === 'desktop' && this.navigationHasSubmenu[this.activeItem[0]];
         this.railOpen = this.media !== 'mobile';
     }
     getPathEndpoint() {
@@ -68,7 +78,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         const checkItems = (path, last) => {
             const item = items.find((item) => item.id === path);
             if (last) {
-                return (item === null || item === void 0 ? void 0 : item.path) || '/';
+                return item === null || item === void 0 ? void 0 : item.path;
             }
             items = (item === null || item === void 0 ? void 0 : item.items) || [];
             return;
@@ -76,25 +86,58 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         for (let i = 0; i < this.selectedItem.length; i++) {
             result = checkItems(this.selectedItem[i], i === this.selectedItem.length - 1);
         }
-        return result || window.location.href;
+        return result;
     }
     loadPage(path) {
         this.path = path;
-        this.selectedItem = path;
+        this.activeItem = path;
+        const endPoint = this.getPathEndpoint();
+        // If the route does not have a path, skip navigating
+        if (!endPoint) {
+            return;
+        }
         this.fire('navigation-change', path);
         if (!this.disableNavigate) {
             window.history.pushState({}, '', this.getPathEndpoint());
             window.dispatchEvent(new PopStateEvent('popstate'));
         }
     }
+    /**
+     * Handles the drawer state. If it should be open yes or no.
+     * @param param0
+     */
+    handleDrawerOpen({ mobileForce, tabletForce } = {}) {
+        if (this.media === 'mobile') {
+            // Only triggerable by button
+            if (mobileForce) {
+                this.drawerOpen = false;
+            }
+        }
+        if (this.media === 'tablet') {
+            if (tabletForce) {
+                this.drawerOpen = false;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
+        if (this.media === 'desktop') {
+            if (this.navigationHasSubmenu[this.activeItem[0]]) {
+                this.drawerOpen = true;
+            }
+            else {
+                this.drawerOpen = this.navigationHasSubmenu[this.selectedItem[0]];
+            }
+        }
+    }
     /**
      * 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
+     * In this case we also do not close the drawer in non desktop mode, so the user is able to select a next level in the menu
      */
     handleRailItemClick({ detail }) {
         var _a;
-        if (this.selectedItem[0] !== detail) {
+        if (this.activeItem[0] !== detail || this.media === 'mobile') {
             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];
@@ -102,65 +145,32 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
             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);
+            this.handleDrawerOpen();
         }
     }
     /**
      * 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 {
-            this.activeItem = this.selectedItem;
-            this.drawerOpen = false;
-        }
-        this.activeItem = this.selectedItem;
+        this.selectedItem = [detail];
+        this.handleDrawerOpen();
     }
     /**
      * 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;
-        }
-    }
+    handleRailItemMouseLeave() { }
     /**
      * 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;
+        this.selectedItem = this.activeItem;
+        this.handleDrawerOpen({ tabletForce: true });
     }
     /**
      * Handle the click on a sub menu item
@@ -169,11 +179,13 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      */
     handleSubMenuClick({ detail }) {
         this.selectedItem = detail;
-        this.activeItem = detail;
-        if ((!this.railOpen || !this.persistent) && !this.currentSelectedHasChildren(detail)) {
-            this.drawerOpen = false;
+        const endPoint = this.getPathEndpoint();
+        let mobileForce = false;
+        if (endPoint) {
+            this.loadPage(this.selectedItem);
+            mobileForce = true;
         }
-        this.loadPage(this.selectedItem);
+        this.handleDrawerOpen({ mobileForce, tabletForce: this.touch });
     }
     /**
      * Handle the topbar menu click.
@@ -187,7 +199,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * This should reset the active item, so the root-level menu gets triggered
      */
     handleDrawerBackClick() {
-        this.activeItem = [];
+        this.selectedItem = [];
     }
     /**
      * Check if the passed paths last item has children yes or no
@@ -209,10 +221,9 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         return !this.railOpen
             ? html `
           <section class="drawer-menu-button">
-            <exm-navigation-icon-button
-              icon=${this.drawerOpen ? 'menu_open' : 'menu'}
-              @navigation-icon-button-click=${this.handleTopbarMenuClick}
-            ></exm-navigation-icon-button>
+            <md-icon-button @click=${this.handleTopbarMenuClick}
+              ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
+            >
           </section>
         `
             : nothing;
@@ -222,37 +233,60 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
      * If more levels deep, show the back button
      */
     renderStartMenu() {
-        return !this.railOpen &&
-            (this.activeItem.length === 0 ||
-                (this.activeItem.length === 1 && !this.currentSelectedHasChildren(this.activeItem)))
+        if (this.railOpen) {
+            return nothing;
+        }
+        return this.selectedItem.length === 0 ||
+            (this.selectedItem.length === 1 && !this.currentSelectedHasChildren(this.selectedItem))
             ? 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 class="drawer-back-button">
-              <exm-navigation-icon-button
-                icon="arrow_back"
-                label="Main menu"
-                @navigation-icon-button-click=${this.handleDrawerBackClick}
-              ></exm-navigation-icon-button>
-            </section>
-          `
-                : nothing;
+            : html `
+          <section class="drawer-back-button">
+            <exm-navigation-icon-button
+              icon="arrow_back"
+              label="Main menu"
+              @navigation-icon-button-click=${this.handleDrawerBackClick}
+            ></exm-navigation-icon-button>
+          </section>
+        `;
     }
     /**
      * return the sub menus. More then 1 level deep
      */
     renderDrawerSubMenu() {
+        /**
+         *  When the selected item is empty we do not display the submenu on mobile
+         */
+        if (this.selectedItem.length === 0 && this.media === 'mobile') {
+            return nothing;
+        }
+        /**
+         * Do we have all items of the selectedItem available in the active Item
+         */
+        const selectedInActive = this.selectedItem.reduce((_, item, index) => {
+            if (item === this.activeItem[index]) {
+                return true;
+            }
+            return false;
+        }, false);
+        /**
+         * Determine the data to use for the submenu. This is needed to show the correct selected items in the submenu of the drawer
+         * If all selected Items ar in the active item, show the active item
+         * If the selected item haas no children, but the drawer is open, show the active item
+         * In all the other cases we use the selected item
+         */
+        const selected = selectedInActive || (!this.navigationHasSubmenu[this.selectedItem[0]] && this.drawerOpen)
+            ? this.activeItem
+            : this.selectedItem;
         return html `
       <exm-navigation-sub-menu
         .items=${this.items}
-        .path=${this.activeItem}
+        .path=${selected}
         ?has-back-button=${!this.railOpen &&
-            (this.activeItem.length > 1 ||
-                (this.activeItem.length > 0 && this.currentSelectedHasChildren(this.activeItem)))}
+            (selected.length > 1 || (selected.length > 0 && this.currentSelectedHasChildren(selected)))}
         @sub-menu-item-click=${this.handleSubMenuClick}
       ></exm-navigation-sub-menu>
     `;
@@ -263,7 +297,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     renderRail() {
         return html `<exm-navigation-rail
       .items=${this.items}
-      .selected=${this.selectedItem}
+      .selected=${this.activeItem}
       @rail-item-click=${this.handleRailItemClick}
       @rail-item-mouseenter=${this.handleRailItemMouseEnter}
       @rail-item-mouseleave=${this.handleRailItemMouseLeave}
@@ -281,10 +315,21 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
       <slot name="topbar-actions" slot="topbar-actions"></slot>
     </exm-navigation-topbar>`;
     }
+    /**
+     * If there is an active item, and that item has children, the width of the drawer should be set for desktop.
+     * This will push the content to the right.
+     *
+     * @returns the width of the drawer area
+     */
+    getDrawerWidth() {
+        if (this.media === 'desktop' && this.activeItem.length > 0 && this.navigationHasSubmenu[this.activeItem[0]]) {
+            return this.drawerWidth;
+        }
+        return 0;
+    }
     render() {
-        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`,
+            '--exm-drawer-width': `${this.getDrawerWidth()}px`,
         };
         const containerClass = { 'show-topbar': !this.railOpen };
         return html `
@@ -323,9 +368,6 @@ __decorate([
 __decorate([
     query('#navigation-container')
 ], ExmNavigationBase.prototype, "navContent", void 0);
-__decorate([
-    state()
-], ExmNavigationBase.prototype, "persistent", void 0);
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "selectedItem", void 0);
@@ -338,9 +380,6 @@ __decorate([
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "drawerOpen", void 0);
-__decorate([
-    state()
-], ExmNavigationBase.prototype, "drawerHover", void 0);
 __decorate([
     state()
 ], ExmNavigationBase.prototype, "navigationHasSubmenu", void 0);

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

@@ -10,9 +10,14 @@ export declare class ExmNavigationSubMenuBase extends ExmgElement {
     path: (string | null)[];
     hasBackButton: boolean;
     currentItem?: MenuItem['items'];
+    static itemIndex: number;
+    navigationElement?: HTMLElement;
     static styles: import("lit").CSSResult[];
     protected updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private handleSubMenuItemClick;
+    private getItemStyle;
     private renderSubMenu;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1,14 +1,16 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
 import { ExmgElement } from '@exmg/lit-base/index.js';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { style } from './styles/exm-navigation-sub-menu-css.js';
+import { animate, fadeOut, fadeIn } from '@lit-labs/motion';
 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';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 export class ExmNavigationSubMenuBase extends ExmgElement {
     constructor() {
         super(...arguments);
@@ -19,19 +21,43 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     updated(changedProperties) {
         var _a;
         if (changedProperties.has('path') || changedProperties.has('items')) {
-            console.log('updated', this.path);
             this.currentItem = ((_a = this.items.find((item) => item.id === this.path[0])) === null || _a === void 0 ? void 0 : _a.items) || [];
         }
     }
+    connectedCallback() {
+        super.connectedCallback();
+        console.log('Conected submenu');
+    }
+    disconnectedCallback() {
+        console.log('UNConected submenu');
+        if (this.navigationElement) {
+            this.navigationElement.classList.remove('show');
+        }
+        super.disconnectedCallback();
+    }
     handleSubMenuItemClick(path) {
         this.fire('sub-menu-item-click', path);
     }
+    getItemStyle() {
+        return {
+            'grid-area': `${ExmNavigationSubMenuBase.itemIndex}/1/${ExmNavigationSubMenuBase.itemIndex + 1}/2`,
+        };
+    }
     renderSubMenu(item, path) {
         return html `
       <exm-navigation-drawer-nav-item
+        ${animate({
+            keyframeOptions: {
+                duration: 300,
+            },
+            out: fadeOut,
+            in: fadeIn,
+            properties: ['opacity'],
+        })}
+        style=${styleMap(this.getItemStyle())}
         type="button"
         ?selected=${this.path.includes(item.id)}
-        class="has-submenu"
+        class="has-submenu ${this.path.includes(item.id) ? 'selected' : ''}"
         @click=${this.handleSubMenuItemClick.bind(this, [...path])}
         ?has-submenu=${true}
         submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
@@ -41,9 +67,12 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
         <div class="sub-menu">
           <md-list>
             <!-- Need to check for multiple items -->
-            ${(item.items || []).map((subItem) => (subItem.items || []).length === 0
-            ? html `
+            ${(item.items || []).map((subItem) => {
+            ExmNavigationSubMenuBase.itemIndex += 1;
+            return (subItem.items || []).length === 0
+                ? html `
                     <exm-navigation-drawer-nav-item
+                      style=${styleMap(this.getItemStyle())}
                       class="collapsed-item"
                       ?selected=${this.path.includes(subItem.id)}
                       @click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
@@ -51,7 +80,8 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
                       ${subItem.label}
                     </exm-navigation-drawer-nav-item>
                   `
-            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
+                : this.renderSubMenu(item, [this.path[0] || '', item.id]);
+        })}
           </md-list>
         </div>
       </exm-collapsed>
@@ -59,12 +89,25 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
     }
     render() {
         const navClass = { nav: true, 'has-back-button': this.hasBackButton };
+        ExmNavigationSubMenuBase.itemIndex = 0;
         return html `<div class="top"><slot name="top"></slot></div>
-      <nav class=${classMap(navClass)}>
+      <nav id="exm-navigation-sub-menu" class=${classMap(navClass)}>
         <md-list>
-          ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
-            ? html `
+          ${repeat(this.currentItem || [], ({ id }) => id, (item) => {
+            ExmNavigationSubMenuBase.itemIndex += 1;
+            return (item.items || []).length === 0
+                ? html `
                     <exm-navigation-drawer-nav-item
+                      ${animate({
+                    keyframeOptions: {
+                        duration: 300,
+                    },
+                    stabilizeOut: true,
+                    out: fadeOut,
+                    in: fadeIn,
+                    properties: ['opacity'],
+                })}
+                      style="${styleMap(this.getItemStyle())}"
                       type="button"
                       ?selected=${this.path.includes(item.id)}
                       @click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
@@ -72,12 +115,14 @@ export class ExmNavigationSubMenuBase extends ExmgElement {
                       ${item.label}
                     </exm-navigation-drawer-nav-item>
                   `
-            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
+                : this.renderSubMenu(item, [this.path[0] || '', item.id]);
+        })}
         </md-list>
       </nav>
       <div class="bottom"><slot name="bottom"></slot></div>`;
     }
 }
+ExmNavigationSubMenuBase.itemIndex = 0;
 ExmNavigationSubMenuBase.styles = [style];
 __decorate([
     property({ type: Array })
@@ -91,4 +136,7 @@ __decorate([
 __decorate([
     state()
 ], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
+__decorate([
+    query('nav')
+], ExmNavigationSubMenuBase.prototype, "navigationElement", void 0);
 //# sourceMappingURL=exm-navigation-sub-menu-base.js.map

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

@@ -15,10 +15,9 @@ export class ExmNavigationTopbarBase extends ExmgElement {
     }
     render() {
         return html `
-      <exm-navigation-icon-button
-        icon=${this.drawerOpen ? 'menu_open' : 'menu'}
-        @navigation-icon-button-click=${this.handleMenuButtonClick}
-      ></exm-navigation-icon-button>
+      <md-icon-button @click=${this.handleMenuButtonClick}
+        ><md-icon>${this.drawerOpen ? 'menu_open' : 'menu'}</md-icon></md-icon-button
+      >
       <slot name="topbar-title" class="topbar-title"></slot>
       <slot name="topbar-actions"></slot>
     `;

package/src/mixins/media-queries.d.ts

@@ -3,5 +3,6 @@ type Constructor<T = {}> = new (...args: any[]) => T;
 type MediaType = 'mobile' | 'tablet' | 'desktop';
 export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
     media: MediaType;
+    touch: boolean;
 }> & T;
 export {};

package/src/mixins/media-queries.js

@@ -5,9 +5,11 @@ export const MediaQueries = (superClass) => {
         constructor() {
             super(...arguments);
             this.media = 'desktop';
+            this.touch = false;
             this.mobileMedia = window.matchMedia('(max-width: 960px)');
             this.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1200px)');
             this.desktopMedia = window.matchMedia('(min-width: 1201px)');
+            this.hoverMedia = window.matchMedia('(hover: hover)');
         }
         updateMedia(media) {
             return (mediaMatch) => {
@@ -17,6 +19,12 @@ export const MediaQueries = (superClass) => {
                 }
             };
         }
+        updateTouch() {
+            return (mediaMatch) => {
+                this.touch = !mediaMatch.matches;
+                this.requestUpdate();
+            };
+        }
         connectedCallback() {
             super.connectedCallback();
             // @ts-ignore
@@ -25,10 +33,12 @@ export const MediaQueries = (superClass) => {
             this.updateMedia('tablet')(this.tabletMedia);
             // @ts-ignore
             this.updateMedia('desktop')(this.desktopMedia);
-            // eslint-disable-next-line
+            // @ts-ignore
+            this.updateTouch()(this.hoverMedia);
             this.mobileMedia.addEventListener('change', this.updateMedia('mobile').bind(this));
             this.tabletMedia.addEventListener('change', this.updateMedia('tablet').bind(this));
             this.desktopMedia.addEventListener('change', this.updateMedia('desktop').bind(this));
+            this.hoverMedia.addEventListener('change', this.updateTouch().bind(this));
         }
         updated(changedProperties) {
             var _a;
@@ -39,6 +49,9 @@ export const MediaQueries = (superClass) => {
     __decorate([
         property({ type: String })
     ], MediaQueryClass.prototype, "media", void 0);
+    __decorate([
+        property({ type: Boolean })
+    ], MediaQueryClass.prototype, "touch", void 0);
     return MediaQueryClass;
 };
 //# sourceMappingURL=media-queries.js.map

package/src/styles/exm-navigation-css.js

@@ -56,7 +56,11 @@ export const style = css `
   }
 
   .drawer-menu-button {
-    padding: 8px 12px;
+    padding: 8px 16px;
+    height: var(--_exm-navigation-top-bar-height, 64px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
   }
 
   .drawer-back-button {

package/src/styles/exm-navigation-drawer-nav-item-css.js

@@ -6,13 +6,22 @@ export const style = css `
       var(--md-sys-color-secondary)
     );
     --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
+    --_exm-navigation-item-color-sub-selected: var(
+      --exm-navigation-item-color-sub-selected,
+      var(--md-sys-color-on-surface)
+    );
+    --_exm-navigation-item-background-color-sub-selected: var(
+      --exm-navigation-item-background-color-sub-selected,
+      var(--md-sys-color-surface-container-highest)
+    );
   }
 
   md-list-item {
     margin-right: 8px;
     margin-left: 8px;
-    border-radius: 1rem;
-    --md-list-item-container-shape: 1rem;
+    border-radius: 2rem;
+    --md-list-item-container-shape: 2rem;
+    --md-list-item-one-line-container-height: 48px;
   }
 
   md-list-item[selected] {
@@ -24,6 +33,12 @@ export const style = css `
       --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
   }
 
+  :host(.has-submenu) {
+    md-list-item[selected] {
+      background-color: var(--_exm-navigation-item-background-color-sub-selected);
+      --md-list-item-label-text-color: var(--_exm-navigation-item-color-sub-selected);
+    }
+  }
   md-list-item.collapsed-item[selected] {
     --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
     background-color: var(--_exm-navigation-item-background-color-selected);

package/src/styles/exm-navigation-sub-menu-css.js

@@ -8,22 +8,29 @@ export const style = css `
     --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
   }
 
+  .nav {
+    padding-top: 4px;
+  }
+
   md-list {
     padding-top: 0;
+    display: grid;
+    grid-template-rows: repeat(auto-fit, auto);
   }
 
   md-list-item {
     margin-right: 8px;
     margin-left: 8px;
-    border-radius: 1rem;
-    --md-list-item-container-shape: 1rem;
+    border-radius: 2rem;
+    --md-list-item-container-shape: 2rem;
+    --md-list-item-one-line-container-height: 48px;
   }
 
   md-list-item[selected] {
     --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
     background-color: var(--_exm-navigation-item-background-color-selected);
-    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
-      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
+    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected);
+    --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
   }
 
   md-list-item.collapsed-item[selected] {

package/src/styles/exm-navigation-topbar-css.js

@@ -17,7 +17,7 @@ export const style = css `
     padding: 8px 12px;
   }
 
-  exm-navigation-icon-button {
+  md-icon-button {
     align-self: center;
     grid-area: 1/1/2/2;
     justify-self: center;

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

@@ -1,9 +0,0 @@
-import '@material/web/list/list.js';
-import '@material/web/list/list-item.js';
-import { ExmgElement } from '@exmg/lit-base';
-declare const ExmNavigationDrawerNav_base: typeof ExmgElement;
-export declare class ExmNavigationDrawerNav extends ExmNavigationDrawerNav_base {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}
-export {};

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

@@ -1,47 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { navigationRailHidden, navigationRailActive } from './exm-navigation-signals.js';
-import { SignalWatcher } from '@lit-labs/preact-signals';
-import '@material/web/list/list.js';
-import '@material/web/list/list-item.js';
-import { ExmgElement } from '@exmg/lit-base';
-let ExmNavigationDrawerNav = class ExmNavigationDrawerNav extends SignalWatcher(ExmgElement) {
-    render() {
-        return navigationRailHidden.value
-            ? html `<div class="nav">
-          <div class="header">
-            <md-icon-button @click=${() => this.fire('drawer-close', null, true)}
-              ><md-icon>menu_open</md-icon></md-icon-button
-            >
-          </div>
-          <div class="navigation">
-            ${navigationRailActive.value === null
-                ? html `<div class="nav top-level"><slot name="topLevel"></slot></div>`
-                : html `<div class="nav"><slot name="navTop"></slot><slot></slot></div>`}
-          </div>
-        </div>`
-            : html `<slot></slot>`;
-    }
-};
-ExmNavigationDrawerNav.styles = [
-    css `
-      :host {
-        display: block;
-      }
-
-      .nav {
-        margin: 8px 0 auto;
-      }
-
-      .header md-icon-button {
-        margin: 4px 12px 8px 16px;
-      }
-    `,
-];
-ExmNavigationDrawerNav = __decorate([
-    customElement('exm-navigation-drawer-nav')
-    // eslint-disable-next-line
-], ExmNavigationDrawerNav);
-export { ExmNavigationDrawerNav };
-//# sourceMappingURL=exm-navigation-drawer-nav.js.map

package/src/exm-navigation-rail-nav-base.d.ts

@@ -1,4 +0,0 @@
-import { LitElement } from 'lit';
-export declare class ExmNavigationRailNavBase extends LitElement {
-    render(): import("lit-html").TemplateResult<1>;
-}

package/src/exm-navigation-rail-nav-base.js

@@ -1,9 +0,0 @@
-import { LitElement, html } from 'lit';
-export class ExmNavigationRailNavBase extends LitElement {
-    render() {
-        return html `<nav aria-label="Main">
-      <slot></slot>
-    </nav>`;
-    }
-}
-//# sourceMappingURL=exm-navigation-rail-nav-base.js.map

package/src/exm-navigation-rail-nav.d.ts

@@ -1,9 +0,0 @@
-import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
-export declare class ExmNavigationRailNav extends ExmNavigationRailNavBase {
-    static styles: import("lit").CSSResult[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-navigation-rail-nav': ExmNavigationRailNav;
-    }
-}

package/src/exm-navigation-rail-nav.js

@@ -1,12 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-rail-nav-css.js';
-import { ExmNavigationRailNavBase } from './exm-navigation-rail-nav-base.js';
-let ExmNavigationRailNav = class ExmNavigationRailNav extends ExmNavigationRailNavBase {
-};
-ExmNavigationRailNav.styles = [style];
-ExmNavigationRailNav = __decorate([
-    customElement('exm-navigation-rail-nav')
-], ExmNavigationRailNav);
-export { ExmNavigationRailNav };
-//# sourceMappingURL=exm-navigation-rail-nav.js.map

package/src/exm-navigation-signals.d.ts

@@ -1,11 +0,0 @@
-export declare const navigationItemHover: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerHover: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerOpen: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationActiveHasSubmenu: import("@preact/signals-core").Signal<{
-    [k: string]: boolean;
-}>;
-export declare const navigationRailSelected: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationSubSelected: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationRailActive: import("@preact/signals-core").Signal<string | null>;
-export declare const navigationRailHidden: import("@preact/signals-core").Signal<boolean>;
-export declare const navigationDrawerPersistent: import("@preact/signals-core").Signal<boolean>;

package/src/exm-navigation-signals.js

@@ -1,11 +0,0 @@
-import { signal } from '@lit-labs/preact-signals';
-export const navigationItemHover = signal(false);
-export const navigationDrawerHover = signal(false);
-export const navigationDrawerOpen = signal(false);
-export const navigationActiveHasSubmenu = signal({});
-export const navigationRailSelected = signal(null);
-export const navigationSubSelected = signal(null);
-export const navigationRailActive = signal(null);
-export const navigationRailHidden = signal(false);
-export const navigationDrawerPersistent = signal(false);
-//# sourceMappingURL=exm-navigation-signals.js.map

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

@@ -1,8 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import '@material/mwc-top-app-bar-fixed';
-export declare class ExmNavigationToolbarBase extends ExmgElement {
-    protected firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

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

@@ -1,33 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base';
-import { html } from 'lit';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import '@material/mwc-top-app-bar-fixed';
-export class ExmNavigationToolbarBase extends ExmgElement {
-    firstUpdated() {
-        const appToolbar = this.shadowRoot.querySelector('mwc-top-app-bar-fixed');
-        if (appToolbar) {
-            const observer = new MutationObserver((_, obs) => {
-                const shadowRoot = appToolbar.shadowRoot;
-                const header = shadowRoot ? shadowRoot.querySelector('header') : null;
-                if (header) {
-                    header.style.left = '0px';
-                    header.style.right = '0px';
-                    obs.disconnect(); // Stop observing once we have made the changes
-                }
-            });
-            observer.observe(appToolbar.shadowRoot, {
-                childList: true,
-                subtree: true,
-            });
-        }
-    }
-    render() {
-        return html `<mwc-top-app-bar-fixed>
-      <slot name="navigationIcon" slot="navigationIcon"></slot>
-      <slot name="title" slot="title"></slot>
-      <slot name="actionItems" slot="actionItems"></slot>
-    </mwc-top-app-bar-fixed>`;
-    }
-}
-//# sourceMappingURL=exm-navigation-toolbar-base.js.map

package/src/exm-navigation-toolbar.d.ts

@@ -1,9 +0,0 @@
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-export declare class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-    static styles: import("lit").CSSResult[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-navigation-toolbar': ExmNavigationToolbar;
-    }
-}

package/src/exm-navigation-toolbar.js

@@ -1,12 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-toolbar-css.js';
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-let ExmNavigationToolbar = class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-};
-ExmNavigationToolbar.styles = [style];
-ExmNavigationToolbar = __decorate([
-    customElement('exm-navigation-toolbar')
-], ExmNavigationToolbar);
-export { ExmNavigationToolbar };
-//# sourceMappingURL=exm-navigation-toolbar.js.map

package/src/styles/exm-navigate-drawer-nav-item-css.d.ts

@@ -1 +0,0 @@
-export declare const style: import("lit").CSSResult;

package/src/styles/exm-navigate-drawer-nav-item-css.js

@@ -1,40 +0,0 @@
-import { css } from 'lit';
-export const style = css `
-  :host {
-    --_exm-navigation-item-background-color-selected: var(
-      --exm-navigation-item-background-color-selected,
-      var(--md-sys-color-secondary)
-    );
-    --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
-  }
-
-  md-list-item {
-    margin-right: 8px;
-    margin-left: 8px;
-    border-radius: 1rem;
-    --md-list-item-container-shape: 1rem;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-  }
-
-  md-list-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-    --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
-      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
-  }
-
-  md-list-item.collapsed-item[selected] {
-    --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-    background-color: var(--_exm-navigation-item-background-color-selected);
-  }
-
-  md-list-item[selected] md-icon {
-    color: var(--md-sys-color-primary);
-  }
-
-  .sub-menu {
-    margin-left: 1rem;
-  }
-`;
-//# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

package/src/styles/exm-navigation-rail-nav-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-rail-nav-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:flex;flex-direction:column;--_exm-navigation-rail-nav-width: var(--exm-navigation-rail-nav-width, 88px);width:var(--_exm-navigation-rail-nav-width);margin-top:20px}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-nav-css.js.map

package/src/styles/exm-navigation-styles-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-styles-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-item-background-color-selected: var( --exm-navigation-item-background-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary))}exm-navigation-drawer{--md-list-container-color: none;--md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-container-shape: 24px}exm-navigation-drawer md-list-item{margin-right:8px;margin-left:8px;border-radius:24px;--md-list-item-container-shape: 24px}exm-navigation-drawer md-list-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected);--md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected) --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)}exm-navigation-drawer md-list-item.collapsed-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected)}exm-navigation-drawer md-list-item[selected] md-icon{color:var(--md-sys-color-primary)}.sub-menu{margin-left:.8rem}.left-margin{margin-left:2.5rem}`;
-export default style;
-//# sourceMappingURL=exm-navigation-styles-css.js.map

package/src/styles/exm-navigation-toolbar-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-toolbar-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:block}mwc-top-app-bar-fixed{--mdc-theme-primary: var(--exm-navigation-toolbar-primary, var(--md-sys-color-background));--mdc-theme-on-primary: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}md-icon{fill:var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}@media screen and (min-width: 961px){slot[name=navigationIcon]{display:none}}`;
-export default style;
-//# sourceMappingURL=exm-navigation-toolbar-css.js.map