@exmg/exm-navigation 1.1.4-alpha.6 → 1.1.5-alpha.5

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

@@ -10,6 +10,8 @@ import './exm-navigation-rail.js';
 import './exm-navigation-sub-menu.js';
 import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 declare const ExmNavigationBase_base: (new (...args: any[]) => {
     media: "mobile" | "tablet" | "desktop";
     touch: boolean;
@@ -43,6 +45,11 @@ export declare class ExmNavigationBase extends ExmNavigationBase_base {
      */
     navigationHasSubmenu: Record<string, boolean>;
     static styles: import("lit").CSSResult[];
+    constructor();
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    private setPath;
     protected updated(changedProperties: PropertyValues): void;
     protected firstUpdated(changedProperties: PropertyValues): void;
     connectedCallback(): void;

package/dist/exm-navigation-base.js

@@ -14,13 +14,15 @@ import './exm-navigation-rail.js';
 import './exm-navigation-sub-menu.js';
 import './exm-navigation-drawer-menu.js';
 import './exm-navigation-drawer.js';
+import '@material/web/icon/icon.js';
+import '@material/web/iconbutton/icon-button.js';
 // eslint-disable-next-line new-cap
 export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     constructor() {
-        super(...arguments);
+        super();
         this.items = [];
         this.path = ['chat'];
-        this.drawerWidth = 319;
+        this.drawerWidth = 275;
         this.disableNavigate = false;
         /**
          * The menu item triggered by hovering and entering submenu's
@@ -43,6 +45,55 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
          * Object with menuitem and a bool for having that path sub items yes or no
          */
         this.navigationHasSubmenu = {};
+        /**
+         * Listen to popState changes. When the event has a state, the browser navigation buttons have been used and we have to update the path
+         */
+        window.addEventListener('popstate', (event) => {
+            if (event.state) {
+                this.setPath();
+            }
+        });
+    }
+    /**
+     * Get the menu items and the current path and set the correct startPath for the navigation
+     */
+    setPath() {
+        let path = [];
+        /**
+         * Set to true if we found the path. This is needed because for breaking out of a recursive function
+         */
+        let finished = false;
+        /**
+         * Loop through the items with a give depth. For every depth level the id of the route is set to that index
+         * If there is a matching path, we set finished to true, so all levels wil break out of their for-loop
+         * Every call done with depth 0 will reset the path, so no artifacts of the previous route will remain
+         *
+         * @param items The items to loop through
+         * @param depth The navigation depth
+         */
+        function checkItems(items, depth = 0) {
+            for (const item of items) {
+                if (finished) {
+                    break;
+                }
+                if (depth === 0) {
+                    path = [];
+                }
+                path[depth] = item.id;
+                if (item.path === window.location.pathname || `${item.path}/` === window.location.pathname) {
+                    finished = true;
+                    break;
+                }
+                if ((item.items || []).length > 0) {
+                    checkItems(item.items, depth + 1);
+                }
+            }
+        }
+        checkItems(this.items);
+        this.path = path;
+        this.selectedItem = path;
+        this.activeItem = path;
+        this.handleDrawerOpen();
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -61,6 +112,11 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         if (changedProperties.has('media')) {
             this.handleMediaTypeChange.bind(this)();
         }
+        document.documentElement.style.setProperty('--exm-navigation-submenu-width', `${this.drawerWidth}px`);
+        /**
+         * Set the start path
+         */
+        this.setPath();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -334,7 +390,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
     }
     render() {
         const containerStyle = {
-            '--exm-drawer-width': `${this.getDrawerWidth()}px`,
+            '--exm-navigation-submenu-column-width': `${this.getDrawerWidth()}px`,
         };
         const containerClass = { 'show-topbar': !this.railOpen };
         return html `

package/dist/mixins/media-queries.js

@@ -7,8 +7,8 @@ export const MediaQueries = (superClass) => {
             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.tabletMedia = window.matchMedia('(min-width: 961px) and (max-width: 1600px)');
+            this.desktopMedia = window.matchMedia('(min-width: 1601px)');
             this.hoverMedia = window.matchMedia('(hover: hover)');
         }
         updateMedia(media) {

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const style = css `
   .navigation-container {
     display: grid;
-    grid-template-columns: auto var(--exm-drawer-width, 500px) 1fr;
+    grid-template-columns: auto var(--exm-navigation-submenu-column-width, 500px) 1fr;
     grid-template-rows: 1fr;
     width: 100%;
     transition: grid-template-columns 0.3s ease;

package/dist/styles/exm-navigation-drawer-css.js

@@ -1,13 +1,10 @@
 import { css } from 'lit';
 export const style = css `
-  :root {
-    --md-sys-color-background: var(--md-sys-color-surface-container-high);
-  }
-
   :host {
-    --exm-drawer-max-width: 319px;
+    --md-sys-color-background: var(--md-sys-color-surface-container-high);
+    --_exm-navigation-submenu-width: var(--exm-navigation-submenu-width);
     display: grid;
-    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
+    grid-template-columns: var(--_exm-navigation-submenu-width, 300px) 1fr;
     height: 100vh;
     width: 100%;
     box-sizing: border-box;
@@ -17,8 +14,8 @@ export const style = css `
 
   aside {
     position: absolute;
-    left: -300px;
-    width: var(--exm-drawer-max-width, 300px);
+    left: calc(-1 * var(--_exm-navigation-submenu-width, 300px) - 1px);
+    width: var(--_exm-navigation-submenu-width, 300px);
     height: 100%;
     transition: left 0.3s ease-out;
     z-index: 4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.4-alpha.6+9122b9a",
+  "version": "1.1.5-alpha.5+569284b",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,20 +15,17 @@
     "./exm-navigation-icon-button.js": "./dist/exm-navigation-icon-button.js",
     "./exm-navigation-rail.js": "./dist/exm-navigation-rail.js",
     "./exm-navigation-rail-nav-item.js": "./dist/exm-navigation-rail-nav-item.js",
-    "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js",
-    "./exm-navigation-base.js": "./dist/ExmNavigationBase.js"
+    "./exm-navigation-topbar.js": "./dist/exm-navigation-topbar.js"
   },
   "dependencies": {
-    "@exmg/lit-base": "^3.0.0",
-    "@lit-labs/motion": "^1.0.7",
-    "@material/mwc-top-app-bar-fixed": "^0.27.0",
+    "@lit-labs/motion": "^1.0.7"
+  },
+  "peerDependencies": {
+    "@exmg/lit-base": "^3.0.3",
     "@material/web": "^2.2.0",
-    "lit": "^3.0.0",
+    "lit": "^3.2.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@exmg/lit-cli": "1.1.13"
-  },
   "keywords": [
     "web-components",
     "lit",
@@ -50,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9122b9a8a49bc497349b8577983af1b18a84e359"
+  "gitHead": "569284b73ae26df21846b0673aae5a14af49d594"
 }