@exmg/exm-navigation 1.1.9-alpha.0 → 1.1.10-alpha.35

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;

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();
         this.items = [];
         this.path = ['chat'];
-        this.drawerWidth = 319;
+        this.drawerWidth = 275;
         this.disableNavigate = false;
         /**
          * The menu item triggered by hovering and entering submenu's
@@ -78,7 +80,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
                     path = [];
                 }
                 path[depth] = item.id;
-                if (item.path === window.location.pathname) {
+                if (item.path === window.location.pathname || `${item.path}/` === window.location.pathname) {
                     finished = true;
                     break;
                 }
@@ -91,6 +93,7 @@ export class ExmNavigationBase extends MediaQueries(ExmgElement) {
         this.path = path;
         this.selectedItem = path;
         this.activeItem = path;
+        this.handleDrawerOpen();
     }
     updated(changedProperties) {
         if (changedProperties.has('media')) {
@@ -109,6 +112,7 @@ 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
          */
@@ -386,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,15 +14,15 @@ export const style = css `
 
   aside {
     position: absolute;
-    left: calc(-1 * var(--exm-drawer-max-width, 300px) - 1px);
-    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;
     background-color: var(--exm-drawer-container-color, var(--md-sys-color-surface-container, #f3edf7));
     color: var(--exm-drawer-container-on-color, var(--md-sys-color-on-surface-container, #f3edf7));
     border-radius: 0 var(--mdc-shape-large, 0) var(--mdc-shape-large, 0) 0;
-    border-left: 1px solid var(--md-sys-color-outline);
+    border-left: 1px solid var(--md-sys-color-outline-variant);
 
     &.open {
       left: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-navigation",
-  "version": "1.1.9-alpha.0",
+  "version": "1.1.10-alpha.35+671db4b",
   "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": "1973df6ecaaf0a57b688f5eb8852516295bc04d6"
+  "gitHead": "671db4b2e04ae387cc0eba60fc4419b02036b70b"
 }