@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/collection/components/menu/burger-menu.css

@@ -81,25 +81,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-primary.selected {
-  background-color: var(--theme-btn-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary.hover, .btn-primary:hover {
-  border-color: var(--theme-btn-primary--border-color--hover) !important;
-  background-color: var(--theme-btn-primary--background--hover) !important;
-  color: var(--theme-btn-primary--color--hover) !important;
+  border-color: var(--theme-btn-primary--border-color--hover);
+  background-color: var(--theme-btn-primary--background--hover);
+  color: var(--theme-btn-primary--color--hover);
 }
 .btn-primary.selected.hover, .btn-primary.selected:hover {
-  background-color: var(--theme-btn-primary--background--selected-hover);
-  color: var(--theme-btn-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
-  border-color: var(--theme-btn-primary--border-color--active) !important;
-  background-color: var(--theme-btn-primary--background--active) !important;
-  color: var(--theme-btn-primary--color--active) !important;
+  border-color: var(--theme-btn-primary--border-color--active);
+  background-color: var(--theme-btn-primary--background--active);
+  color: var(--theme-btn-primary--color--active);
 }
 .btn-primary.selected:not(:disabled):not(.disabled):active, .btn-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-primary--background--selected-active);
-  color: var(--theme-btn-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-primary.disabled, .btn-primary:disabled {
   pointer-events: none;
@@ -127,25 +128,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-outline-primary.selected {
-  background-color: var(--theme-btn-outline-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary.hover, .btn-outline-primary:hover {
-  border-color: var(--theme-btn-outline-primary--border-color--hover) !important;
-  background-color: var(--theme-btn-outline-primary--background--hover) !important;
-  color: var(--theme-btn-outline-primary--color--hover) !important;
+  border-color: var(--theme-btn-outline-primary--border-color--hover);
+  background-color: var(--theme-btn-outline-primary--background--hover);
+  color: var(--theme-btn-outline-primary--color--hover);
 }
 .btn-outline-primary.selected.hover, .btn-outline-primary.selected:hover {
-  background-color: var(--theme-btn-outline-primary--background--selected-hover);
-  color: var(--theme-btn-outline-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
-  border-color: var(--theme-btn-outline-primary--border-color--active) !important;
-  background-color: var(--theme-btn-outline-primary--background--active) !important;
-  color: var(--theme-btn-outline-primary--color--active) !important;
+  border-color: var(--theme-btn-outline-primary--border-color--active);
+  background-color: var(--theme-btn-outline-primary--background--active);
+  color: var(--theme-btn-outline-primary--color--active);
 }
 .btn-outline-primary.selected:not(:disabled):not(.disabled):active, .btn-outline-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-outline-primary--background--selected-active);
-  color: var(--theme-btn-outline-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
   pointer-events: none;
@@ -173,23 +175,24 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-invisible-primary.selected {
-  background-color: var(--theme-btn-invisible-primary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary.hover, .btn-invisible-primary:hover {
-  background-color: var(--theme-btn-invisible-primary--background--hover) !important;
-  color: var(--theme-btn-invisible-primary--color--hover) !important;
+  background-color: var(--theme-btn-invisible-primary--background--hover);
+  color: var(--theme-btn-invisible-primary--color--hover);
 }
 .btn-invisible-primary.selected.hover, .btn-invisible-primary.selected:hover {
-  background-color: var(--theme-btn-invisible-primary--background--selected-hover);
-  color: var(--theme-btn-invisible-primary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary:not(:disabled):not(.disabled):active, .btn-invisible-primary:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-primary--background--active) !important;
-  color: var(--theme-btn-invisible-primary--color--active) !important;
+  background-color: var(--theme-btn-invisible-primary--background--active);
+  color: var(--theme-btn-invisible-primary--color--active);
 }
 .btn-invisible-primary.selected:not(:disabled):not(.disabled):active, .btn-invisible-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-primary--background--selected-active);
-  color: var(--theme-btn-invisible-primary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
   pointer-events: none;
@@ -216,25 +219,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-secondary.selected {
-  background-color: var(--theme-btn-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary.hover, .btn-secondary:hover {
-  border-color: var(--theme-btn-secondary--border-color--hover) !important;
-  background-color: var(--theme-btn-secondary--background--hover) !important;
-  color: var(--theme-btn-secondary--color--hover) !important;
+  border-color: var(--theme-btn-secondary--border-color--hover);
+  background-color: var(--theme-btn-secondary--background--hover);
+  color: var(--theme-btn-secondary--color--hover);
 }
 .btn-secondary.selected.hover, .btn-secondary.selected:hover {
-  background-color: var(--theme-btn-secondary--background--selected-hover);
-  color: var(--theme-btn-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
-  border-color: var(--theme-btn-secondary--border-color--active) !important;
-  background-color: var(--theme-btn-secondary--background--active) !important;
-  color: var(--theme-btn-secondary--color--active) !important;
+  border-color: var(--theme-btn-secondary--border-color--active);
+  background-color: var(--theme-btn-secondary--background--active);
+  color: var(--theme-btn-secondary--color--active);
 }
 .btn-secondary.selected:not(:disabled):not(.disabled):active, .btn-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-secondary--background--selected-active);
-  color: var(--theme-btn-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-secondary.disabled, .btn-secondary:disabled {
   pointer-events: none;
@@ -262,25 +266,26 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-outline-secondary.selected {
-  background-color: var(--theme-btn-outline-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary.hover, .btn-outline-secondary:hover {
-  border-color: var(--theme-btn-outline-secondary--border-color--hover) !important;
-  background-color: var(--theme-btn-outline-secondary--background--hover) !important;
-  color: var(--theme-btn-outline-secondary--color--hover) !important;
+  border-color: var(--theme-btn-outline-secondary--border-color--hover);
+  background-color: var(--theme-btn-outline-secondary--background--hover);
+  color: var(--theme-btn-outline-secondary--color--hover);
 }
 .btn-outline-secondary.selected.hover, .btn-outline-secondary.selected:hover {
-  background-color: var(--theme-btn-outline-secondary--background--selected-hover);
-  color: var(--theme-btn-outline-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
-  border-color: var(--theme-btn-outline-secondary--border-color--active) !important;
-  background-color: var(--theme-btn-outline-secondary--background--active) !important;
-  color: var(--theme-btn-outline-secondary--color--active) !important;
+  border-color: var(--theme-btn-outline-secondary--border-color--active);
+  background-color: var(--theme-btn-outline-secondary--background--active);
+  color: var(--theme-btn-outline-secondary--color--active);
 }
 .btn-outline-secondary.selected:not(:disabled):not(.disabled):active, .btn-outline-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-outline-secondary--background--selected-active);
-  color: var(--theme-btn-outline-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
   pointer-events: none;
@@ -308,23 +313,24 @@
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
 .btn-invisible-secondary.selected {
-  background-color: var(--theme-btn-invisible-secondary--background--selected);
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary.hover, .btn-invisible-secondary:hover {
-  background-color: var(--theme-btn-invisible-secondary--background--hover) !important;
-  color: var(--theme-btn-invisible-secondary--color--hover) !important;
+  background-color: var(--theme-btn-invisible-secondary--background--hover);
+  color: var(--theme-btn-invisible-secondary--color--hover);
 }
 .btn-invisible-secondary.selected.hover, .btn-invisible-secondary.selected:hover {
-  background-color: var(--theme-btn-invisible-secondary--background--selected-hover);
-  color: var(--theme-btn-invisible-secondary--color--selected-hover);
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary:not(:disabled):not(.disabled):active, .btn-invisible-secondary:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-secondary--background--active) !important;
-  color: var(--theme-btn-invisible-secondary--color--active) !important;
+  background-color: var(--theme-btn-invisible-secondary--background--active);
+  color: var(--theme-btn-invisible-secondary--color--active);
 }
 .btn-invisible-secondary.selected:not(:disabled):not(.disabled):active, .btn-invisible-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.selected.dropdown-toggle {
-  background-color: var(--theme-btn-invisible-secondary--background--selected-active);
-  color: var(--theme-btn-invisible-secondary--color--selected-active);
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
 }
 .btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
   pointer-events: none;
@@ -389,7 +395,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -403,6 +421,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host svg {
   display: inline-block;
   vertical-align: middle;

package/dist/collection/components/menu/menu.css

@@ -34,6 +34,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
@@ -1679,6 +1687,10 @@
 }
 
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: row;
   position: absolute;
@@ -1693,6 +1705,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .tabs {
   height: 100%;
   position: relative;
@@ -1771,6 +1807,9 @@
   width: calc(100vw - 16rem);
   left: 16rem;
 }
+:host .menu-overlay-container {
+  display: contents;
+}
 :host .menu-avatar {
   max-height: 3rem;
 }
@@ -1791,24 +1830,24 @@
   margin-top: auto;
 }
 
-:host(.mode-small) .menu:not(.expanded) {
+:host(.breakpoint-sm) .menu:not(.expanded) {
   width: 0;
 }
-:host(.mode-small) .menu {
+:host(.breakpoint-sm) .menu {
   padding-top: 2rem;
 }
-:host(.mode-small) .menu .burger-menu {
+:host(.breakpoint-sm) .menu .burger-menu {
   display: none;
 }
-:host(.mode-small) .menu-overlay {
+:host(.breakpoint-sm) .menu-overlay {
   left: 0px;
   width: 100vw;
 }
 
-:host(.mode-large) {
+:host(.breakpoint-lg) {
   position: relative;
 }
-:host(.mode-large) .menu.expanded {
+:host(.breakpoint-lg) .menu.expanded {
   box-shadow: none;
 }
 

package/dist/collection/components/menu/menu.js

@@ -8,10 +8,12 @@
  */
 import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
+import { ApplicationSidebarToggleEvent } from '../application-sidebar/events';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { applicationLayoutService } from '../utils/application-layout/service';
+import { useContextConsumer } from '../utils/context';
 import { menuController } from '../utils/menu-service/menu-service';
 import { convertToRemString } from '../utils/rwd.util';
-import { hostContext, isBasicNavigationLayout } from '../utils/screen/context';
-import { screenMode } from '../utils/screen/service';
 import { themeSwitcher } from '../utils/theme-switcher';
 export class Menu {
   constructor() {
@@ -33,8 +35,6 @@ export class Menu {
     this.i18nExpandSidebar = 'Expand sidebar';
     this.expand = false;
     this.pinned = false;
-    this.forceLayout = undefined;
-    this.supportedModes = ['small', 'medium', 'large'];
     this.i18nLegal = 'About & legal information';
     this.i18nSettings = 'Settings';
     this.i18nToggleTheme = 'Toggle theme';
@@ -43,33 +43,24 @@ export class Menu {
     this.showPinned = false;
     this.mapExpand = true;
     this.activeTab = undefined;
-    this.mode = 'large';
+    this.breakpoint = 'lg';
     this.itemsScrollShadowTop = false;
     this.itemsScrollShadowBottom = false;
+    this.applicationLayoutContext = undefined;
   }
   pinnedChange(newPinned) {
-    this.setPinned(this.pinned);
-    if (newPinned) {
-      screenMode.disableModeDetection();
-      screenMode.setMode('large');
-      return;
-    }
-    screenMode.enableModeDetection();
-  }
-  forceLayoutChange(newMode) {
-    if (this.pinned) {
-      console.warn('You cannot force a layout while pinned property is set!');
+    var _a;
+    if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+      console.warn('ix-map-navigation does not support pinning of the menu');
       return;
     }
-    if (!newMode) {
-      screenMode.enableModeDetection();
+    this.setPinned(this.pinned);
+    if (newPinned) {
+      applicationLayoutService.disableBreakpointDetection();
+      applicationLayoutService.setBreakpoint('lg');
       return;
     }
-    screenMode.disableModeDetection();
-    screenMode.setMode(newMode);
-  }
-  supportedModesChange(modes) {
-    screenMode.setSupportedMods(modes);
+    applicationLayoutService.enableBreakpointDetection();
   }
   get popoverArea() {
     return this.hostElement.shadowRoot.querySelector('#popover-area');
@@ -110,7 +101,7 @@ export class Menu {
   get aboutPopoverContainer() {
     return this.hostElement.querySelector('.about-news');
   }
-  get aboutsNewsPopover() {
+  get aboutNewsPopover() {
     var _a;
     return ((_a = document.querySelector('ix-menu-about-news')) !== null && _a !== void 0 ? _a : this.hostElement.querySelector('ix-menu-about-news'));
   }
@@ -136,20 +127,19 @@ export class Menu {
     if (this.pinned) {
       this.pinnedChange(this.pinned);
     }
-    if (this.forceLayout) {
-      this.forceLayoutChange(this.forceLayout);
-    }
-    if (this.supportedModes !== undefined && this.supportedModes.length > 0) {
-      this.supportedModesChange(this.supportedModes);
-    }
   }
   componentWillLoad() {
+    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+      this.applicationLayoutContext = ctx;
+      if (ctx.hideHeader === true) {
+        this.onBreakpointChange('md');
+        return;
+      }
+      this.onBreakpointChange(applicationLayoutService.breakpoint);
+    }, true);
     menuController.register(this.hostElement);
-    const layout = hostContext('ix-basic-navigation', this.hostElement);
-    if (isBasicNavigationLayout(layout) && layout.hideHeader === false) {
-      screenMode.onChange.on((mode) => this.onModeChange(mode));
-      this.onModeChange(screenMode.mode);
-    }
+    applicationLayoutService.onChange.on((breakpoint) => this.onBreakpointChange(breakpoint));
+    this.onBreakpointChange(applicationLayoutService.breakpoint);
   }
   componentWillRender() {
     this.appendTabs();
@@ -161,12 +151,23 @@ export class Menu {
     this.showPinned = pinned;
     menuController.setIsPinned(pinned);
   }
-  onModeChange(mode) {
-    if (!this.supportedModes.includes(mode)) {
+  onBreakpointChange(mode) {
+    var _a;
+    if (!this.applicationLayoutContext && mode === 'sm') {
+      return;
+    }
+    if (((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.host) === 'map-navigation') {
+      this.breakpoint = 'md';
       return;
     }
-    this.mode = mode;
-    if (this.mode === 'large') {
+    if (!this.applicationLayoutContext) {
+      return;
+    }
+    if (this.applicationLayoutContext.hideHeader && mode === 'sm') {
+      return;
+    }
+    this.breakpoint = mode;
+    if (this.breakpoint === 'lg') {
       this.setPinned(true);
       this.toggleMenu(true);
       return;
@@ -193,21 +194,20 @@ export class Menu {
   }
   appendAboutNewsPopover() {
     var _a;
-    if (!this.aboutsNewsPopover) {
+    if (!this.aboutNewsPopover) {
       return;
     }
-    this.aboutsNewsPopover.style.bottom =
-      this.getAboutPopoverVerticalPosition();
-    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutsNewsPopover))) {
+    this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();
+    if (!((_a = this.popoverArea) === null || _a === void 0 ? void 0 : _a.contains(this.aboutNewsPopover))) {
       const showMore = () => {
         var _a;
-        if (((_a = this.aboutsNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
-          this.about.activeTabLabel = this.aboutsNewsPopover.aboutItemLabel;
+        if (((_a = this.aboutNewsPopover) === null || _a === void 0 ? void 0 : _a.aboutItemLabel) && this.about) {
+          this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;
           this.toggleAbout(true);
         }
       };
-      this.aboutsNewsPopover.addEventListener('showMore', showMore.bind(this));
-      document.body.appendChild(this.aboutsNewsPopover);
+      this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));
+      document.body.appendChild(this.aboutNewsPopover);
     }
   }
   /**
@@ -233,8 +233,8 @@ export class Menu {
     else {
       this.expand = !this.expand;
     }
-    if (this.aboutsNewsPopover) {
-      this.aboutsNewsPopover.expanded = this.expand;
+    if (this.aboutNewsPopover) {
+      this.aboutNewsPopover.expanded = this.expand;
     }
     this.expandChange.emit(this.expand);
     this.isTransitionDisabled = false;
@@ -370,10 +370,18 @@ export class Menu {
       this.onOverlayClose();
     }
   }
+  isHiddenFromViewport() {
+    return this.breakpoint === 'sm' && this.expand === false;
+  }
+  sidebarToggle() {
+    this.mapExpandChange.emit(this.mapExpand);
+    this.hostElement.dispatchEvent(new ApplicationSidebarToggleEvent(this.mapExpand));
+  }
   render() {
+    var _a;
     return (h(Host, { class: {
         expanded: this.expand,
-        [`mode-${this.mode}`]: true,
+        [`breakpoint-${this.breakpoint}`]: true,
       }, slot: "menu" }, h("aside", { class: {
         menu: true,
         expanded: this.expand,
@@ -387,26 +395,26 @@ export class Menu {
         'tabs--shadow': true,
         'tabs--shadow-top': true,
         'tabs--shadow--show': this.itemsScrollShadowTop,
-      } }), h("div", { class: "tabs", onScroll: () => this.handleOverflowIndicator() }, h("slot", null)), h("div", { class: {
+      } }), h("div", { class: "tabs", onScroll: () => this.handleOverflowIndicator() }, this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (h("slot", null)) : null), h("div", { class: {
         'tabs--shadow': true,
         'tabs--shadow-bottom': true,
         'tabs--shadow--show': this.itemsScrollShadowBottom,
-      } }))), h("div", { class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { id: "settings", class: {
+      } }))), h("div", { class: "bottom-tab-divider" }), this.settings ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showSettings,
-      }, icon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("slot", { name: "bottom" }), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { id: "aboutAndLegal", class: {
+      }, icon: "cogwheel", onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, h("slot", { name: "bottom" }), h("div", { id: "popover-area" }), this.about ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
         'internal-tab': true,
         'bottom-tab': true,
         active: this.showAbout,
-      }, icon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand ? (h("ix-menu-item", { id: "menu-collapse", onClick: () => this.mapExpandChange.emit(this.mapExpand), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
+      }, icon: "info", onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", tabIcon: "bulb" }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), h("div", { class: {
         'menu-overlay': true,
         visible: this.isOverlayVisible(),
         expanded: this.expand,
       }, onTransitionEnd: () => {
         this.isTransitionDisabled = true;
         this.checkTransition();
-      } }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null)));
+      } }, h("div", { class: 'menu-overlay-container' }, this.showSettings ? h("slot", { name: "ix-menu-settings" }) : null), h("div", { class: 'menu-overlay-container' }, this.showAbout ? h("slot", { name: "ix-menu-about" }) : null))));
   }
   static get is() { return "ix-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -619,49 +627,6 @@ export class Menu {
         "reflect": false,
         "defaultValue": "false"
       },
-      "forceLayout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Mode | undefined",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "Mode": {
-              "location": "import",
-              "path": "../utils/screen/mode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Change the responsive layout of the menu structure"
-        },
-        "attribute": "force-layout",
-        "reflect": false
-      },
-      "supportedModes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Mode[]",
-          "resolved": "Mode[]",
-          "references": {
-            "Mode": {
-              "location": "import",
-              "path": "../utils/screen/mode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Supported layouts"
-        },
-        "defaultValue": "['small', 'medium', 'large']"
-      },
       "i18nLegal": {
         "type": "string",
         "mutable": false,
@@ -759,9 +724,10 @@ export class Menu {
       "showPinned": {},
       "mapExpand": {},
       "activeTab": {},
-      "mode": {},
+      "breakpoint": {},
       "itemsScrollShadowTop": {},
-      "itemsScrollShadowBottom": {}
+      "itemsScrollShadowBottom": {},
+      "applicationLayoutContext": {}
     };
   }
   static get events() {
@@ -906,9 +872,6 @@ export class Menu {
     return [{
         "propName": "pinned",
         "methodName": "pinnedChange"
-      }, {
-        "propName": "supportedModes",
-        "methodName": "supportedModesChange"
       }];
   }
   static get listeners() {