@exmg/exm-navigation 1.0.0

package/index.d.ts

@@ -0,0 +1,16 @@
+export { ExmgNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
+export { ExmgNavigationRailNav } from './src/exm-navigation-rail-nav.js';
+export { ExmgNavigationRailBase } from './src/exm-navigation-rail-base.js';
+export { ExmgNavigationRail } from './src/exm-navigation-rail.js';
+export { ExmgNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
+export { ExmgNavigationDrawer } from './src/exm-navigation-drawer.js';
+export { ExmgNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
+export { ExmgNavigationBase } from './src/exm-navigation-base.js';
+export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
+export { SignalWatcher } from '@lit-labs/preact-signals';
+export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
+export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
+export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
+export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
+export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
+export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';

package/index.js

@@ -0,0 +1,17 @@
+export { ExmgNavigationRailNavItem } from './src/exm-navigation-rail-nav-item.js';
+export { ExmgNavigationRailNav } from './src/exm-navigation-rail-nav.js';
+export { ExmgNavigationRailBase } from './src/exm-navigation-rail-base.js';
+export { ExmgNavigationRail } from './src/exm-navigation-rail.js';
+export { ExmgNavigationDrawerBase } from './src/exm-navigation-drawer-base.js';
+export { ExmgNavigationDrawer } from './src/exm-navigation-drawer.js';
+export { ExmgNavigationToolbarBase } from './src/exm-navigation-toolbar-base.js';
+export { ExmgNavigationBase } from './src/exm-navigation-base.js';
+export { navigationItemHover, navigationDrawerHover, navigationDrawerOpen, navigationRailSelected, navigationRailActive, navigationDrawerPersistent, navigationRailHidden, navigationActiveHasSubmenu, navigationSubSelected, } from './src/exm-navigation-signals.js';
+export { SignalWatcher } from '@lit-labs/preact-signals';
+export { style as exmgRailStyles } from './src/styles/exm-navigation-rail-css.js';
+export { style as exmgRailNavStyles } from './src/styles/exm-navigation-rail-nav-css.js';
+export { style as exmgRailNavItemStyles } from './src/styles/exm-navigation-rail-nav-item-css.js';
+export { style as exmgDrawerStyles } from './src/styles/exm-navigation-drawer-css.js';
+export { style as exmgToolbarStyles } from './src/styles/exm-navigation-toolbar-css.js';
+export { style as exmgNavigationDrawerStyles } from './src/styles/exm-navigation-styles-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@exmg/exm-navigation",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-navigation-rail.js": "./src/exm-navigation-rail.js",
+    "./exm-navigation-rail-nav.js": "./src/exm-navigation-rail-nav.js",
+    "./exm-navigation-rail-nav-item.js": "./src/exm-navigation-rail-nav-item.js",
+    "./exm-navigation-drawer.js": "./src/exm-navigation-drawer.js",
+    "./exm-navigation-toolbar.js": "./src/exm-navigation-toolbar.js",
+    "./exm-navigation-drawer-nav.js": "./src/exm-navigation-drawer-nav.js",
+    "./exm-navigation-base.js": "./src/ExmgNavigationBase.js"
+  },
+  "dependencies": {
+    "@exmg/lit-base": "^2.0.1",
+    "@lit-labs/observers": "^2.0.2",
+    "@lit-labs/preact-signals": "^1.0.1",
+    "@material/mwc-drawer": "^0.27.0",
+    "@material/mwc-top-app-bar-fixed": "^0.27.0",
+    "@material/web": "^1.3.0",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "navigation"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://github.com/exmg/exmachina-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-navigation"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { ExmgNavigationDrawer } from './exm-navigation-drawer.js';
+export interface MenuItem {
+    id: string;
+    label: string;
+    path?: string;
+    url?: string;
+    icon?: string;
+    items?: MenuItem[];
+}
+declare const ExmgNavigationBase_base: typeof LitElement;
+export declare class ExmgNavigationBase extends ExmgNavigationBase_base {
+    pageId: string;
+    drawer?: ExmgNavigationDrawer;
+    menu: MenuItem[];
+    expandedItems: {
+        [k: string]: boolean;
+    };
+    connectedCallback(): void;
+    isSubMenuExpanded(id: string): boolean;
+    toggleExpanded(id: string): void;
+    getItemsFromParentId(id: string): MenuItem[];
+    getActiveSubmenuParent(): string | null;
+    loadPage(id: string): void;
+    handlSubMenuBackClick(): void;
+    handleNavigationSubClicked(i: MenuItem, parentId: string): void;
+    handleRailClick(id: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/src/exm-navigation-base.js

@@ -0,0 +1,85 @@
+import { __decorate } from "tslib";
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import { LitElement, html } from 'lit';
+import { navigationDrawerHover, navigationDrawerPersistent, navigationItemHover, navigationRailActive, navigationRailSelected, navigationSubSelected, } from './exm-navigation-signals.js';
+import { property, query } from 'lit/decorators.js';
+// eslint-disable-next-line
+export class ExmgNavigationBase extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.pageId = 'chat';
+        this.menu = [];
+        this.expandedItems = {};
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        navigationRailSelected.value = this.pageId;
+        navigationRailActive.value = this.pageId;
+    }
+    isSubMenuExpanded(id) {
+        return !!this.expandedItems[id];
+    }
+    toggleExpanded(id) {
+        const expanded = this.isSubMenuExpanded(id);
+        this.expandedItems[id] = !expanded;
+        this.requestUpdate();
+    }
+    getItemsFromParentId(id) {
+        var _a;
+        return ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
+    }
+    getActiveSubmenuParent() {
+        // On hover show howver content and otherwise show the selected submenu
+        const parentId = !navigationItemHover.value && !navigationDrawerHover.value
+            ? navigationRailSelected.value
+            : navigationRailActive.value;
+        if (parentId === null) {
+            return null;
+        }
+        return parentId;
+    }
+    loadPage(id) {
+        this.pageId = id;
+    }
+    handlSubMenuBackClick() {
+        navigationRailActive.value = null;
+    }
+    handleNavigationSubClicked(i, parentId) {
+        navigationRailSelected.value = parentId;
+        if ((i.items || []).length > 0) {
+            this.toggleExpanded(i.id);
+        }
+        else {
+            navigationSubSelected.value = i.id;
+            this.loadPage(navigationSubSelected.value);
+        }
+    }
+    handleRailClick(id) {
+        var _a;
+        if (navigationRailSelected.value !== id) {
+            // Set new selected rail item
+            navigationRailSelected.value = id;
+            // Reset selected sub menu item
+            navigationSubSelected.value = null;
+            const items = ((_a = this.menu.find((i) => i.id === id)) === null || _a === void 0 ? void 0 : _a.items) || [];
+            if (items.length > 0) {
+                navigationRailActive.value = id;
+            }
+            // If persistent menu close the drawer when a item is clicked and does not has children items
+            if (navigationDrawerPersistent.value) {
+                this.drawer.open = items.length > 0 ? true : false;
+            }
+            this.loadPage(navigationRailSelected.value);
+        }
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgNavigationBase.prototype, "pageId", void 0);
+__decorate([
+    query('#drawer')
+], ExmgNavigationBase.prototype, "drawer", void 0);
+//# sourceMappingURL=exm-navigation-base.js.map

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

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import '@material/mwc-drawer';
+import { Drawer } from '@material/mwc-drawer';
+declare const ExmgNavigationDrawerBase_base: typeof LitElement;
+export declare class ExmgNavigationDrawerBase extends ExmgNavigationDrawerBase_base {
+    open: boolean;
+    drawer?: Drawer;
+    persistent: boolean;
+    hoverIn: () => void;
+    handleClose: () => void;
+    hoverOut: () => void;
+    private _itemHover;
+    private _drawerHover;
+    private _asideElement?;
+    private _observer;
+    hasActiveSubmenu(): boolean;
+    updateInlineStyles(): void;
+    constructor();
+    disconnectedCallback(): void;
+    toggle(): void;
+    _handleClose(): void;
+    _hoverIn(): void;
+    _hoverOut(): void;
+    hidemenu(): void;
+    protected updated(): void;
+    protected firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};

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

@@ -0,0 +1,173 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '@material/mwc-drawer';
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
+import { navigationDrawerHover, navigationItemHover, navigationDrawerOpen, navigationRailHidden, navigationDrawerPersistent, navigationActiveHasSubmenu, } from './exm-navigation-signals.js';
+import { SignalWatcher } from '@lit-labs/preact-signals';
+import { observer } from '@exmg/lit-base';
+// eslint-disable-next-line
+export class ExmgNavigationDrawerBase extends SignalWatcher(LitElement) {
+    hasActiveSubmenu() {
+        let activeHasSubMenu = false;
+        for (const key in navigationActiveHasSubmenu.value) {
+            // eslint-disable-next-line
+            if (navigationActiveHasSubmenu.value.hasOwnProperty(key) && navigationActiveHasSubmenu.value[key]) {
+                activeHasSubMenu = true;
+            }
+        }
+        return activeHasSubMenu;
+    }
+    updateInlineStyles() {
+        const drawer = this.drawer;
+        if (drawer) {
+            const shadowRoot = drawer.shadowRoot;
+            const asideElement = shadowRoot.querySelector('aside');
+            if (asideElement) {
+                asideElement.style.left = navigationRailHidden.value ? '0px' : 'var(--_exm-navigation-rail-nav-width)';
+            }
+            const contentElement = shadowRoot.querySelector('div.mdc-drawer-app-content');
+            if (contentElement) {
+                // @ts-ignore
+                contentElement.style.marginLeft = navigationRailHidden.value
+                    ? '0px'
+                    : this.open
+                        ? 'var(--mdc-drawer-width, 256px)'
+                        : '0px';
+            }
+        }
+    }
+    constructor() {
+        super();
+        this.open = false;
+        this.persistent = false;
+        this._itemHover = false;
+        this._drawerHover = false;
+        // @ts-ignore
+        this._observer = new ResizeController(this, {
+            target: window.document.body,
+            callback: (entries) => {
+                const entry = entries.pop();
+                if (!entry || !entry.contentRect)
+                    return;
+                const width = entry.contentRect.width;
+                const persistentWidth = width > 1560;
+                const activeHasSubMenu = this.hasActiveSubmenu();
+                // If root nav item set and has submenu and persistent width meets the criteria
+                const persistent = activeHasSubMenu && persistentWidth;
+                if (this.persistent !== persistent) {
+                    if (!persistent) {
+                        this.open = false;
+                    }
+                    else {
+                        this.open = true;
+                    }
+                    this.persistent = persistent;
+                }
+                navigationRailHidden.value = width < 961;
+                this.updateInlineStyles();
+            },
+        });
+        // Bind methods to ensure the correct 'this' context
+        this.hoverIn = this._hoverIn.bind(this);
+        this.hoverOut = this._hoverOut.bind(this);
+        this.handleClose = this._handleClose.bind(this);
+    }
+    disconnectedCallback() {
+        // Clean up listeners
+        this._asideElement.removeEventListener('mouseenter', this.hoverIn);
+        this._asideElement.removeEventListener('mouseleave', this.hoverOut);
+        this.removeEventListener('drawer-close', this.handleClose);
+    }
+    toggle() {
+        this.open = !this.open;
+    }
+    _handleClose() {
+        this.open = false;
+    }
+    _hoverIn() {
+        navigationDrawerHover.value = true;
+    }
+    _hoverOut() {
+        navigationDrawerHover.value = false;
+    }
+    hidemenu() {
+        // Hide submenu when drawer is not persistent when mouse leaves the drawer or menu items
+        if (!this._itemHover && !this._drawerHover && !(this.persistent && this.hasActiveSubmenu())) {
+            this.open = false;
+        }
+    }
+    updated() {
+        if (this._itemHover !== navigationItemHover.value) {
+            this._itemHover = navigationItemHover.value;
+            if (this._itemHover) {
+                this.open = true;
+            }
+            if (!this._itemHover) {
+                // Timeout to allow for mouse transition to the content element
+                setTimeout(this.hidemenu.bind(this), 100);
+            }
+            else {
+                this.hidemenu();
+            }
+        }
+        if (this._drawerHover !== navigationDrawerHover.value) {
+            this._drawerHover = navigationDrawerHover.value;
+            this.hidemenu();
+        }
+    }
+    async firstUpdated() {
+        await this.updateComplete;
+        const drawer = this.drawer;
+        if (drawer) {
+            const shadowRoot = drawer.shadowRoot;
+            if (shadowRoot) {
+                const asideElement = shadowRoot.querySelector('aside');
+                if (asideElement) {
+                    // Hack custom styles in the aside element
+                    asideElement.style.borderRightWidth = '0px';
+                    asideElement.style.borderRadius = '0px 16px 16px 0px';
+                    asideElement.style.top = '0px';
+                    asideElement.style.bottom = '0px';
+                    asideElement.style.height = 'unset';
+                    asideElement.style.transitionProperty = 'transform, box-shadow';
+                    asideElement.style.transitionDuration = '300ms';
+                    asideElement.style.transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
+                    asideElement.style.background = `var(--md-sys-color-surface-container)`;
+                    asideElement.style.borderLeft = '1px solid var(--md-sys-color-outline-variant)';
+                    asideElement.style.left = 'var(--_exm-navigation-rail-nav-width)';
+                    // Add event listeners to the aside element
+                    asideElement.addEventListener('mouseenter', this.hoverIn);
+                    asideElement.addEventListener('mouseleave', this.hoverOut);
+                    this._asideElement = asideElement;
+                }
+            }
+        }
+        this.addEventListener('drawer-close', this.handleClose);
+    }
+    render() {
+        return html `<mwc-drawer type="dismissible" ?open=${this.open}>
+      <div class="content">
+        <slot></slot>
+      </div>
+      <slot name="appContent" slot="appContent"></slot>
+    </mwc-drawer>`;
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    observer(function (value) {
+        navigationDrawerOpen.value = value;
+        this.updateInlineStyles();
+    })
+], ExmgNavigationDrawerBase.prototype, "open", void 0);
+__decorate([
+    query('mwc-drawer')
+], ExmgNavigationDrawerBase.prototype, "drawer", void 0);
+__decorate([
+    property({ type: Boolean }),
+    observer(function (value) {
+        navigationDrawerPersistent.value = value;
+    })
+], ExmgNavigationDrawerBase.prototype, "persistent", void 0);
+//# sourceMappingURL=exm-navigation-drawer-base.js.map

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

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

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

@@ -0,0 +1,47 @@
+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 ExmgNavigationDrawerNav = class ExmgNavigationDrawerNav 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>`;
+    }
+};
+ExmgNavigationDrawerNav.styles = [
+    css `
+      :host {
+        display: block;
+      }
+
+      .nav {
+        margin: 8px 0 auto;
+      }
+
+      .header md-icon-button {
+        margin: 4px 12px 8px 16px;
+      }
+    `,
+];
+ExmgNavigationDrawerNav = __decorate([
+    customElement('exm-navigation-drawer-nav')
+    // eslint-disable-next-line
+], ExmgNavigationDrawerNav);
+export { ExmgNavigationDrawerNav };
+//# sourceMappingURL=exm-navigation-drawer-nav.js.map

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

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

package/src/exm-navigation-drawer.js

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

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

@@ -0,0 +1,4 @@
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export declare class ExmgNavigationRailBase extends ExmgElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+export class ExmgNavigationRailBase extends ExmgElement {
+    render() {
+        return html `<div class="top"><slot name="top"></slot></div>
+      <div class="nav"><slot></slot></div>
+      <div class="bottom"><slot name="bottom"></slot></div>`;
+    }
+}
+//# sourceMappingURL=exm-navigation-rail-base.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { LitElement, html } from 'lit';
+export class ExmgNavigationRailNavBase 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-item-base.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import '@material/web/focus/md-focus-ring.js';
+export declare class ExmgNavigationRailNavItemBase extends LitElement {
+    icon: string;
+    itemId?: string;
+    label?: string;
+    selected: boolean;
+    hasSubMenu: boolean;
+    constructor();
+    deselectOtherOptions(id: string): void;
+    hoverIn(): void;
+    hoverOut(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,69 @@
+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 '@material/web/focus/md-focus-ring.js';
+import { observer } from '@exmg/lit-base';
+export class ExmgNavigationRailNavItemBase extends LitElement {
+    constructor() {
+        super();
+        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>
+      <div class="label">${this.label}</div>
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgNavigationRailNavItemBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], ExmgNavigationRailNavItemBase.prototype, "itemId", void 0);
+__decorate([
+    property({ type: String })
+], ExmgNavigationRailNavItemBase.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);
+            }
+        }
+    })
+], ExmgNavigationRailNavItemBase.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgNavigationRailNavItemBase.prototype, "hasSubMenu", void 0);
+//# sourceMappingURL=exm-navigation-rail-nav-item-base.js.map

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

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

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

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

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

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

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

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

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

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

package/src/exm-navigation-rail.js

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,8 @@
+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 ExmgNavigationToolbarBase extends ExmgElement {
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,33 @@
+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 ExmgNavigationToolbarBase 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

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

package/src/exm-navigation-toolbar.js

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

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

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

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

@@ -0,0 +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 default style;
+//# sourceMappingURL=exm-navigation-drawer-css.js.map

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

@@ -0,0 +1,29 @@
+: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;
+  }
+}

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

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

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

@@ -0,0 +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 default style;
+//# sourceMappingURL=exm-navigation-rail-css.js.map

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

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

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

@@ -0,0 +1,4 @@
+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-rail-nav-item-css.d.ts

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

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

@@ -0,0 +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 default style;
+//# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map

package/src/styles/exm-navigation-rail-nav-item.scss

@@ -0,0 +1,107 @@
+: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 0.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: 0.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: 0.7;
+}

package/src/styles/exm-navigation-rail-nav.scss

@@ -0,0 +1,7 @@
+: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;
+}

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

@@ -0,0 +1,35 @@
+: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;
+}

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

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

package/src/styles/exm-navigation-styles-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))}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-styles.scss

@@ -0,0 +1,46 @@
+: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: 0.8rem;
+}
+
+.left-margin {
+  margin-left: 2.5rem;
+}

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

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

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

@@ -0,0 +1,4 @@
+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

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

@@ -0,0 +1,18 @@
+: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;
+  }
+}