@exmg/exm-navigation 1.1.6-alpha.9 → 1.1.8

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

@@ -43,6 +43,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

@@ -17,10 +17,10 @@ import './exm-navigation-drawer.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 +43,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) {
+                    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 +110,10 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         if (changedProperties.has('media')) {
             this.handleMediaTypeChange.bind(this)();
         }
+        /**
+         * Set the start path
+         */
+        this.setPath();
     }
     connectedCallback() {
         super.connectedCallback();

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-drawer-css.js

@@ -17,7 +17,7 @@ export const style = css `
 
   aside {
     position: absolute;
-    left: -300px;
+    left: calc(-1 * var(--exm-drawer-max-width, 300px) - 1px);
     width: var(--exm-drawer-max-width, 300px);
     height: 100%;
     transition: left 0.3s ease-out;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.6-alpha.9+3cc6892",
+  "version": "1.1.8",
   "type": "module",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
@@ -49,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3cc6892b878d133d6cf25d0795712e30412d9386"
+  "gitHead": "e9c6e6e7b81658423344b640be549700e95be7c0"
 }