@exmg/exm-navigation 1.0.3 → 1.1.0

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

@@ -1,48 +1,24 @@
 import { __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { navigationItemHover, navigationRailActive, navigationActiveHasSubmenu } from './exm-navigation-signals.js';
+import { style } from './styles/exm-navigation-rail-nav-item-css.js';
 import '@material/web/focus/md-focus-ring.js';
-import { observer } from '@exmg/lit-base';
+import './exm-navigation-icon.js';
 export class ExmNavigationRailNavItemBase extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.icon = '';
         this.selected = false;
         this.hasSubMenu = false;
-        // eslint-disable-next-line
-        this.setAttribute('role', 'link');
-        // Bind methods to ensure the correct 'this' context
-        this.hoverIn = this.hoverIn.bind(this);
-        this.hoverOut = this.hoverOut.bind(this);
-        // Add event listeners in the constructor
-        this.addEventListener('mouseenter', this.hoverIn);
-        this.addEventListener('mouseleave', this.hoverOut);
-    }
-    deselectOtherOptions(id) {
-        for (const key in navigationActiveHasSubmenu.value) {
-            // eslint-disable-next-line
-            if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && key !== id) {
-                navigationActiveHasSubmenu.value[key] = false;
-            }
-        }
-    }
-    hoverIn() {
-        if (this.hasSubMenu) {
-            navigationItemHover.value = true;
-            navigationRailActive.value = this.itemId;
-        }
-    }
-    hoverOut() {
-        navigationItemHover.value = false;
     }
     render() {
-        return html ` <button>
-      <md-focus-ring></md-focus-ring><span class="symbols">${this.icon}</span>
+        return html `<button role="link">
+      <md-focus-ring></md-focus-ring><exm-navigation-icon class="symbols" icon=${this.icon}></exm-navigation-icon>
       <div class="label">${this.label}</div>
     </button>`;
     }
 }
+ExmNavigationRailNavItemBase.styles = [style];
 __decorate([
     property({ type: String })
 ], ExmNavigationRailNavItemBase.prototype, "icon", void 0);
@@ -53,15 +29,7 @@ __decorate([
     property({ type: String })
 ], ExmNavigationRailNavItemBase.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    observer(function (value) {
-        if (this.itemId) {
-            navigationActiveHasSubmenu.value[this.itemId] = value && this.hasSubMenu;
-            if (navigationActiveHasSubmenu.value[this.itemId] && value) {
-                this.deselectOtherOptions(this.itemId);
-            }
-        }
-    })
+    property({ type: Boolean, reflect: true })
 ], ExmNavigationRailNavItemBase.prototype, "selected", void 0);
 __decorate([
     property({ type: Boolean })

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

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

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

@@ -1,10 +1,8 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-rail-nav-item-css.js';
 import { ExmNavigationRailNavItemBase } from './exm-navigation-rail-nav-item-base.js';
 let ExmNavigationRailNavItem = class ExmNavigationRailNavItem extends ExmNavigationRailNavItemBase {
 };
-ExmNavigationRailNavItem.styles = [style];
 ExmNavigationRailNavItem = __decorate([
     customElement('exm-navigation-rail-nav-item')
 ], ExmNavigationRailNavItem);

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

@@ -1,6 +1,5 @@
 import { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
 export declare class ExmNavigationRail extends ExmNavigationRailBase {
-    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/src/exm-navigation-rail.js

@@ -1,10 +1,8 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators/custom-element.js';
 import { ExmNavigationRailBase } from './exm-navigation-rail-base.js';
-import { style } from './styles/exm-navigation-rail-css.js';
 let ExmNavigationRail = class ExmNavigationRail extends ExmNavigationRailBase {
 };
-ExmNavigationRail.styles = [style];
 ExmNavigationRail = __decorate([
     customElement('exm-navigation-rail')
 ], ExmNavigationRail);

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

@@ -1,11 +1,4 @@
-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;
+    [menuItem: 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-sub-menu-base.d.ts

@@ -0,0 +1,17 @@
+import { PropertyValues } from 'lit';
+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 ExmNavigationSubMenuBase extends ExmgElement {
+    items: MenuItem[];
+    path: (string | null)[];
+    currentItem?: MenuItem['items'];
+    static styles: import("lit").CSSResult[];
+    protected updated(changedProperties: PropertyValues): void;
+    private handleSubMenuItemClick;
+    private renderSubMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,88 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { style } from './styles/exm-navigation-sub-menu-css.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 ExmNavigationSubMenuBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.path = [];
+    }
+    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) || [];
+        }
+    }
+    handleSubMenuItemClick(path) {
+        this.fire('sub-menu-item-click', path);
+    }
+    renderSubMenu(item, path) {
+        return html `
+      <exm-navigation-drawer-nav-item
+        type="button"
+        ?selected=${this.path.includes(item.id)}
+        class="has-submenu"
+        @click=${this.handleSubMenuItemClick.bind(this, [...path])}
+        ?has-submenu=${true}
+        submenu-icon=${this.path.includes(item.id) ? 'expand_less' : 'expand_more'}
+        >${item.label}
+      </exm-navigation-drawer-nav-item>
+      <exm-collapsed id="collapsed" ?opened=${this.path.includes(item.id)}>
+        <div class="sub-menu">
+          <md-list>
+            <!-- Need to check for multiple items -->
+            ${(item.items || []).map((subItem) => (subItem.items || []).length === 0
+            ? html `
+                    <exm-navigation-drawer-nav-item
+                      class="collapsed-item"
+                      ?selected=${this.path.includes(subItem.id)}
+                      @click=${this.handleSubMenuItemClick.bind(this, [...path, subItem.id])}
+                    >
+                      ${subItem.label}
+                    </exm-navigation-drawer-nav-item>
+                  `
+            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
+          </md-list>
+        </div>
+      </exm-collapsed>
+    `;
+    }
+    render() {
+        return html `<div class="top"><slot name="top"></slot></div>
+      <nav class="nav">
+        <md-list>
+          ${repeat(this.currentItem || [], ({ id }) => id, (item) => (item.items || []).length === 0
+            ? html `
+                    <exm-navigation-drawer-nav-item
+                      type="button"
+                      ?selected=${this.path.includes(item.id)}
+                      @click=${this.handleSubMenuItemClick.bind(this, [this.path[0] || '', item.id])}
+                    >
+                      ${item.label}
+                    </exm-navigation-drawer-nav-item>
+                  `
+            : this.renderSubMenu(item, [this.path[0] || '', item.id]))}
+        </md-list>
+      </nav>
+      <div class="bottom"><slot name="bottom"></slot></div>`;
+    }
+}
+ExmNavigationSubMenuBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationSubMenuBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Array })
+], ExmNavigationSubMenuBase.prototype, "path", void 0);
+__decorate([
+    state()
+], ExmNavigationSubMenuBase.prototype, "currentItem", void 0);
+//# sourceMappingURL=exm-navigation-sub-menu-base.js.map

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

@@ -0,0 +1,8 @@
+import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
+export declare class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-sub-menu': ExmNavigationSubMenu;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { ExmNavigationSubMenuBase } from './exm-navigation-sub-menu-base.js';
+let ExmNavigationSubMenu = class ExmNavigationSubMenu extends ExmNavigationSubMenuBase {
+};
+ExmNavigationSubMenu = __decorate([
+    customElement('exm-navigation-sub-menu')
+], ExmNavigationSubMenu);
+export { ExmNavigationSubMenu };
+//# sourceMappingURL=exm-navigation-sub-menu.js.map

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

@@ -0,0 +1,10 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { MenuItem } from './types.js';
+import './exm-navigation-rail-nav-item.js';
+export declare class ExmNavigationTopbarBase extends ExmgElement {
+    items: MenuItem[];
+    drawerOpen: boolean;
+    static styles: import("lit").CSSResult[];
+    handleMenuButtonClick(itemId: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,33 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import { style } from './styles/exm-navigation-topbar-css.js';
+import './exm-navigation-rail-nav-item.js';
+export class ExmNavigationTopbarBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.drawerOpen = false;
+    }
+    handleMenuButtonClick(itemId) {
+        this.fire('topbar-menu-click', itemId);
+    }
+    render() {
+        return html `
+      <exm-navigation-icon-button
+        icon=${this.drawerOpen ? 'menu_open' : 'menu'}
+        @navigation-icon-button-click=${this.handleMenuButtonClick}
+      ></exm-navigation-icon-button>
+      <slot name="topbar-title"></slot>
+    `;
+    }
+}
+ExmNavigationTopbarBase.styles = [style];
+__decorate([
+    property({ type: Array })
+], ExmNavigationTopbarBase.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'drawer-open' })
+], ExmNavigationTopbarBase.prototype, "drawerOpen", void 0);
+//# sourceMappingURL=exm-navigation-topbar-base.js.map

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

@@ -0,0 +1,8 @@
+import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
+export declare class ExmNavigationTopbar extends ExmNavigationTopbarBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation-topbar': ExmNavigationTopbar;
+    }
+}

package/src/exm-navigation-topbar.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { ExmNavigationTopbarBase } from './exm-navigation-topbar-base.js';
+let ExmNavigationTopbar = class ExmNavigationTopbar extends ExmNavigationTopbarBase {
+};
+ExmNavigationTopbar = __decorate([
+    customElement('exm-navigation-topbar')
+], ExmNavigationTopbar);
+export { ExmNavigationTopbar };
+//# sourceMappingURL=exm-navigation-topbar.js.map

package/src/exm-navigation.d.ts

@@ -0,0 +1,8 @@
+import { ExmNavigationBase } from './exm-navigation-base.js';
+export declare class ExmNavigation extends ExmNavigationBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation': ExmNavigation;
+    }
+}

package/src/exm-navigation.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmNavigationBase } from './exm-navigation-base.js';
+let ExmNavigation = class ExmNavigation extends ExmNavigationBase {
+};
+ExmNavigation = __decorate([
+    customElement('exm-navigation')
+], ExmNavigation);
+export { ExmNavigation };
+//# sourceMappingURL=exm-navigation.js.map

package/src/mediaQueries.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+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;
+}> & T;
+export {};

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

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+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;
+}> & T;
+export {};

package/src/mixins/media-queries.js

@@ -0,0 +1,45 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+export const MediaQueries = (superClass) => {
+    class MediaQueryClass extends superClass {
+        constructor() {
+            super(...arguments);
+            this.media = 'desktop';
+            this.mobileMedia = window.matchMedia('(max-width: 400px)');
+            this.tabletMedia = window.matchMedia('(min-width: 401px) and (max-width: 1200px)');
+            this.desktopMedia = window.matchMedia('(min-width: 1201px)');
+        }
+        updateMedia(media) {
+            return (mediaMatch) => {
+                if (mediaMatch.matches) {
+                    this.media = media;
+                    this.requestUpdate();
+                }
+                console.log(media, mediaMatch.matches);
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // @ts-ignore
+            this.updateMedia('mobile')(this.mobileMedia);
+            // @ts-ignore
+            this.updateMedia('tablet')(this.tabletMedia);
+            // @ts-ignore
+            this.updateMedia('desktop')(this.desktopMedia);
+            // eslint-disable-next-line
+            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));
+        }
+        updated(changedProperties) {
+            var _a;
+            (_a = super.updated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
+            console.log(`${this.media} was updated`);
+        }
+    }
+    __decorate([
+        property({ type: String })
+    ], MediaQueryClass.prototype, "media", void 0);
+    return MediaQueryClass;
+};
+//# sourceMappingURL=media-queries.js.map

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

@@ -0,0 +1,4 @@
+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}`;
+export default style;
+//# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `.navigation-container{display:grid;grid-template-columns:auto var(--exm-drawer-width, 500px) 1fr;grid-template-rows:1fr;width:100%;transition:grid-template-columns .3s ease}.navigation-container.show-topbar{grid-template-columns:1fr;grid-template-rows:auto 1fr}.navigation-container.show-topbar exm-navigation-topbar{grid-area:1/1/2/2;z-index:2}.navigation-container.show-topbar exm-navigation-drawer{grid-area:1/1/3/2}.navigation-container.show-topbar .content{grid-area:2/1/3/2}exm-navigation-rail{grid-area:1/1/2/2}exm-navigation-drawer{grid-area:1/2/2/3}.content{grid-area:1/3/2/4;z-index:1}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;--mdc-theme-surface: var(--md-sys-color-surface-container-high);--mdc-shape-large: 1rem}.left-margin{margin-left:2.5rem}`;
+export default style;
+//# sourceMappingURL=exm-navigation-css.js.map

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

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{display:block;height:100vh;width:100%;box-sizing:border-box}mwc-drawer{--mdc-drawer-width: 240px}@media screen and (min-width: 961px){:host{padding-left:0}mwc-drawer{margin-left:88px}}@media screen and (max-width: 961px){:host{padding-left:0}mwc-drawer{margin-left:0;--mdc-drawer-width: 319px}}`;
+export const style = css `:root{--md-sys-color-background: var(--md-sys-color-surface-container-high)}:host{--mdc-drawer-width: 319px;display:grid;grid-template-columns:var(--mdc-drawer-width, 300px) 1fr;height:100vh;width:100%;box-sizing:border-box;transition:grid-template-columns .3s ease;position:relative}@media screen and (min-width: 961px){slot[name=appContent]{background-color:rgba(0,0,0,0)}}`;
 export default style;
 //# sourceMappingURL=exm-navigation-drawer-css.js.map

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

@@ -0,0 +1,4 @@
+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}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-trailing-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}`;
+export default style;
+//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

package/src/styles/{exm-navigation-styles.scss → exm-navigation-drawer-nav-item.scss}

@@ -6,41 +6,31 @@
   --_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 {
+md-list-item {
   margin-right: 8px;
   margin-left: 8px;
-  border-radius: 24px;
-  --md-list-item-container-shape: 24px;
+  border-radius: 1rem;
+  --md-list-item-container-shape: 1rem;
 }
 
-exm-navigation-drawer md-list-item[selected] {
+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-trailing-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.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 {
+md-list-item[selected] md-icon {
   color: var(--md-sys-color-primary);
 }
 
 .sub-menu {
-  margin-left: 0.8rem;
-}
-
-.left-margin {
-  margin-left: 2.5rem;
+  margin-left: 1rem;
 }

package/src/styles/exm-navigation-drawer.scss

@@ -1,29 +1,24 @@
+:root {
+  --md-sys-color-background: var(--md-sys-color-surface-container-high);
+}
+
 :host {
-  display: block;
+  --mdc-drawer-width: 319px;
+
+  display: grid;
+  grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
   height: 100vh;
   width: 100%;
   box-sizing: border-box;
-}
+  transition: grid-template-columns 0.3s ease;
 
-mwc-drawer {
-  --mdc-drawer-width: 240px;
+  // This is needed because the aside is positioned absolute.
+  // This will tie them together and makes positioning the aside easier
+  position: relative;
 }
 
 @media screen and (min-width: 961px) {
-  :host {
-    padding-left: 0;
-  }
-  mwc-drawer {
-    margin-left: 88px;
-  }
-}
-
-@media screen and (max-width: 961px) {
-  :host {
-    padding-left: 0;
-  }
-  mwc-drawer {
-    margin-left: 0;
-    --mdc-drawer-width: 319px;
+  slot[name='appContent'] {
+    background-color: transparent;
   }
 }

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

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

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `.icon-button{border:none;background-color:rgba(0,0,0,0);color:#fff;width:48px;height:48px;display:flex;align-items:center}.icon-button.has-label{width:auto}.icon-button .label{padding:0 8px;white-space:nowrap;font-size:16px}`;
+export default style;
+//# sourceMappingURL=exm-navigation-icon-button-css.js.map

package/src/styles/exm-navigation-icon-button.scss

@@ -0,0 +1,19 @@
+.icon-button {
+  border: none;
+  background-color: transparent;
+  color: white;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+
+  &.has-label {
+    width: auto;
+  }
+
+  .label {
+    padding: 0 8px;
+    white-space: nowrap;
+    font-size: 16px;
+  }
+}

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

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

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `.icon{align-items:center;justify-content:center;display:flex;position:relative;height:100%;width:100%;font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px;font-family:"Material Symbols Outlined";font-size:24px;line-height:1;direction:ltr;-webkit-font-smoothing:antialiased}`;
+export default style;
+//# sourceMappingURL=exm-navigation-icon-css.js.map

package/src/styles/exm-navigation-icon.scss

@@ -0,0 +1,18 @@
+.icon {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-variation-settings:
+    'wght' 400,
+    'opsz' 24;
+  transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
+  border-radius: 16px;
+  font-family: 'Material Symbols Outlined';
+  font-size: 24px;
+  line-height: 1;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}

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

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-background-color: var( --exm-navigation-rail-background-color, var(--md-sys-color-surface-container) );display:none;position:fixed;top:0;left:0;flex-direction:column;justify-content:space-between;height:100%;background:var(--_exm-navigation-rail-background-color);overflow-y:auto;z-index:8;box-sizing:border-box}@media screen and (min-width: 961px){:host{display:flex}}.nav{flex:1}.bottom{display:flex;flex-direction:column;flex-grow:1;justify-content:flex-end}`;
+export const style = css `:host{--_exm-navigation-rail-background-color: var( --exm-navigation-rail-background-color, var(--md-sys-color-surface-container) );--_exm-navigation-rail-width: var(--exm-navigation-rail-nav-width, 88px);display:flex;flex-direction:column;justify-content:space-between;height:100%;background:var(--_exm-navigation-rail-background-color);overflow-y:auto;z-index:8;box-sizing:border-box;width:var(--_exm-navigation-rail-width)}@media screen and (min-width: 961px){:host{display:flex}}nav{flex:1}nav ul{list-style:none;padding:0;margin:0}nav li{padding:0;margin:0}.bottom{display:flex;flex-direction:column;flex-grow:1;justify-content:flex-end}`;
 export default style;
 //# sourceMappingURL=exm-navigation-rail-css.js.map

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

@@ -1,4 +1,4 @@
 import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-nav-item-color: var( --exm-navigation-rail-nav-item-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color: var( --exm-navigation-rail-nav-item-icon-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color-hover: var( --exm-navigation-rail-nav-item-icon-color-hover, var(--md-sys-color-surface-container-highest) );--_exm-navigation-rail-nav-item-icon-color-selected: var( --exm-navigation-rail-nav-item-icon-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-rail-nav-item-color-selected: var( --exm-navigation-rail-nav-item-color-selected, var(--md-sys-color-on-secondary) );display:flex;flex-direction:column;width:80px;margin:-2px auto 14px;padding:2px;vertical-align:baseline;align-items:center;cursor:pointer}button{position:relative;background:none;border:none;color:var(--_exm-navigation-rail-nav-item-color)}button:focus{outline:none}.symbols{display:flex;text-align:center;position:relative;align-items:center;justify-content:center;width:56px;height:32px;margin-right:auto;margin-bottom:4px;margin-left:auto;font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px}.symbols{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}.symbols:before{position:absolute;width:100%;height:100%;opacity:0;transform:scaleX(0.32);transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:linear;border-radius:100px;background:var(--md-sys-color-secondary-container);content:"";z-index:-1}.symbols{color:var(--_exm-navigation-rail-nav-item-icon-color);font-variation-settings:"FILL" 1,"wght" 400,"opsz" 24}:host(:hover) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-hover);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-selected);color:var(--_exm-navigation-rail-nav-item-color-selected);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]:hover) .symbols{opacity:.7}`;
+export const style = css `:host{--_exm-navigation-rail-nav-item-color: var( --exm-navigation-rail-nav-item-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color: var( --exm-navigation-rail-nav-item-icon-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color-hover: var( --exm-navigation-rail-nav-item-icon-color-hover, var(--md-sys-color-surface-container-highest) );--_exm-navigation-rail-nav-item-icon-color-selected: var( --exm-navigation-rail-nav-item-icon-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-rail-nav-item-color-selected: var( --exm-navigation-rail-nav-item-color-selected, var(--md-sys-color-on-secondary) );--_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);display:flex;flex-direction:column;width:var(--_exm-navigation-rail-nav-item-width);margin:-2px 0 14px;padding:2px 0;vertical-align:baseline;align-items:center;cursor:pointer;width:100%}button{position:relative;background:none;border:none;color:var(--_exm-navigation-rail-nav-item-color)}button:focus{outline:none}.symbols{display:flex;position:relative;align-items:center;justify-content:center;width:56px;height:32px;margin:0 auto 4px;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px;color:var(--_exm-navigation-rail-nav-item-icon-color)}.symbols:before{position:absolute;width:100%;height:100%;opacity:0;transform:scaleX(0.32);transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:linear;border-radius:100px;background:var(--md-sys-color-secondary-container);content:"";z-index:-1}:host(:hover) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-hover);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-selected);color:var(--_exm-navigation-rail-nav-item-color-selected);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]:hover) .symbols{opacity:.7}`;
 export default style;
 //# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map