feat(core/basic-navigation): add mobile support

packages/core/component-doc.json

@@ -163,8 +163,13 @@
         "ix-basic-navigation",
         "ix-map-navigation"
       ],
-      "dependencies": [],
+      "dependencies": [
+        "ix-burger-menu"
+      ],
       "dependencyGraph": {
+        "ix-application-header": [
+          "ix-burger-menu"
+        ],
         "ix-basic-navigation": [
           "ix-application-header"
         ],
@@ -216,6 +221,9 @@
       "dependencyGraph": {
         "ix-basic-navigation": [
           "ix-application-header"
+        ],
+        "ix-application-header": [
+          "ix-burger-menu"
         ]
       },
       "props": [
@@ -241,7 +249,7 @@
           "mutable": false,
           "attr": "hide-header",
           "reflectToAttr": false,
-          "docs": "Hide application header",
+          "docs": "Hide application header. Will disable responsive feature of basic navigation.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -4500,6 +4508,9 @@
         ],
         "ix-icon-button": [
           "ix-icon"
+        ],
+        "ix-application-header": [
+          "ix-burger-menu"
         ]
       },
       "props": [
@@ -4742,11 +4753,13 @@
       "encapsulation": "none",
       "dependents": [],
       "dependencies": [
+        "ix-burger-menu",
         "ix-menu-item",
         "ix-dropdown"
       ],
       "dependencyGraph": {
         "ix-menu": [
+          "ix-burger-menu",
           "ix-menu-item",
           "ix-dropdown"
         ]

packages/core/src/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Buttons } from "./components/utils/button-variants";
+import { Buttons } from "./components/button/button-variants";
 import { FilterState } from "./components/category-filter/filter-state";
 import { InputState } from "./components/category-filter/input-state";
 import { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
@@ -55,7 +55,7 @@ export namespace Components {
          */
         "applicationName": string;
         /**
-          * Hide application header
+          * Hide application header. Will disable responsive feature of basic navigation.
          */
         "hideHeader": boolean;
     }
@@ -93,6 +93,12 @@ export namespace Components {
          */
         "label": string;
     }
+    interface IxBurgerMenu {
+        /**
+          * Is menu displayed as expanded
+         */
+        "expanded": boolean;
+    }
     interface IxButton {
         /**
           * Disable the button
@@ -1724,6 +1730,12 @@ declare global {
         prototype: HTMLIxBreadcrumbItemElement;
         new (): HTMLIxBreadcrumbItemElement;
     };
+    interface HTMLIxBurgerMenuElement extends Components.IxBurgerMenu, HTMLStencilElement {
+    }
+    var HTMLIxBurgerMenuElement: {
+        prototype: HTMLIxBurgerMenuElement;
+        new (): HTMLIxBurgerMenuElement;
+    };
     interface HTMLIxButtonElement extends Components.IxButton, HTMLStencilElement {
     }
     var HTMLIxButtonElement: {
@@ -2104,6 +2116,7 @@ declare global {
         "ix-blind": HTMLIxBlindElement;
         "ix-breadcrumb": HTMLIxBreadcrumbElement;
         "ix-breadcrumb-item": HTMLIxBreadcrumbItemElement;
+        "ix-burger-menu": HTMLIxBurgerMenuElement;
         "ix-button": HTMLIxButtonElement;
         "ix-category-filter": HTMLIxCategoryFilterElement;
         "ix-chip": HTMLIxChipElement;
@@ -2206,7 +2219,7 @@ declare namespace LocalJSX {
          */
         "applicationName"?: string;
         /**
-          * Hide application header
+          * Hide application header. Will disable responsive feature of basic navigation.
          */
         "hideHeader"?: boolean;
     }
@@ -2256,6 +2269,12 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
+    interface IxBurgerMenu {
+        /**
+          * Is menu displayed as expanded
+         */
+        "expanded"?: boolean;
+    }
     interface IxButton {
         /**
           * Disable the button
@@ -3834,6 +3853,7 @@ declare namespace LocalJSX {
         "ix-blind": IxBlind;
         "ix-breadcrumb": IxBreadcrumb;
         "ix-breadcrumb-item": IxBreadcrumbItem;
+        "ix-burger-menu": IxBurgerMenu;
         "ix-button": IxButton;
         "ix-category-filter": IxCategoryFilter;
         "ix-chip": IxChip;
@@ -3909,6 +3929,7 @@ declare module "@stencil/core" {
             "ix-blind": LocalJSX.IxBlind & JSXBase.HTMLAttributes<HTMLIxBlindElement>;
             "ix-breadcrumb": LocalJSX.IxBreadcrumb & JSXBase.HTMLAttributes<HTMLIxBreadcrumbElement>;
             "ix-breadcrumb-item": LocalJSX.IxBreadcrumbItem & JSXBase.HTMLAttributes<HTMLIxBreadcrumbItemElement>;
+            "ix-burger-menu": LocalJSX.IxBurgerMenu & JSXBase.HTMLAttributes<HTMLIxBurgerMenuElement>;
             "ix-button": LocalJSX.IxButton & JSXBase.HTMLAttributes<HTMLIxButtonElement>;
             "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes<HTMLIxCategoryFilterElement>;
             "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes<HTMLIxChipElement>;

packages/core/src/components/application-header/application-header.scss

@@ -37,3 +37,11 @@
     color: var(--theme-app-header-logo--color);
   }
 }
+
+:host(.mode-mobile) {
+  padding-left: 0.5rem;
+
+  .logo {
+    margin-left: 0.5rem;
+  }
+}

packages/core/src/components/application-header/application-header.tsx

@@ -7,7 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { menuController } from '../utils/menu-service/menu-service';
+import { hostContext, isBasicNavigationLayout } from '../utils/screen/context';
+import { Mode } from '../utils/screen/mode';
+import { screenMode } from '../utils/screen/service';
+import { Disposable } from '../utils/typed-event';
 
 @Component({
   tag: 'ix-application-header',
@@ -22,10 +27,36 @@ export class ApplicationHeader {
    */
   @Prop() name: string;
 
+  @State() mode: Mode = 'desktop';
+
+  @State() menuExpanded = false;
+
+  private menuDisposable?: Disposable;
+  private modeDisposable?: Disposable;
+
+  componentWillLoad() {
+    const layout = hostContext('ix-basic-navigation', this.host);
+    if (isBasicNavigationLayout(layout)) {
+      this.modeDisposable = screenMode.onChange.on(
+        (mode) => (this.mode = mode)
+      );
+      this.mode = screenMode.mode;
+
+      this.menuDisposable = menuController.expandChange.on((show) => {
+        this.menuExpanded = show;
+      });
+    }
+  }
+
   componentDidLoad() {
     this.attachSiemensLogoIfLoaded();
   }
 
+  disconnectedCallback() {
+    this.menuDisposable?.dispose();
+    this.modeDisposable?.dispose();
+  }
+
   private async attachSiemensLogoIfLoaded() {
     await window.customElements.whenDefined('ix-siemens-logo');
     const logoElement = document.createElement('ix-siemens-logo');
@@ -35,9 +66,19 @@ export class ApplicationHeader {
     }
   }
 
+  private async onMenuClick() {
+    menuController.toggle();
+  }
+
   render() {
     return (
-      <Host>
+      <Host class={{ [`mode-${this.mode}`]: true }}>
+        {this.mode === 'mobile' ? (
+          <ix-burger-menu
+            onClick={() => this.onMenuClick()}
+            expanded={this.menuExpanded}
+          ></ix-burger-menu>
+        ) : null}
         <div class="logo">
           <slot name="logo"></slot>
         </div>

packages/core/src/components/application-header/test/cw-application-header.spec.tsx

@@ -11,28 +11,15 @@ import { newSpecPage } from '@stencil/core/testing';
 import { ApplicationHeader } from '../application-header';
 
 describe('ix-application-header', () => {
-  it('renders', async () => {
+  it('desktop mode', async () => {
     const page = await newSpecPage({
       components: [ApplicationHeader],
       html: `<ix-application-header name="Test App">
         <div slot="logo">LOGO</div>
       </ix-application-header>`,
     });
-    expect(page.root).toEqualHtml(`
-    <ix-application-header name="Test App">
-      <mock:shadow-root>
-        <div class="logo">
-          <slot name="logo"></slot>
-        </div>
-        <div class="name">
-          Test App
-        </div>
-        <slot></slot>
-      </mock:shadow-root>
-      <div slot="logo">
-        LOGO
-      </div>
-    </ix-application-header>
-    `);
+
+    const header = page.doc.querySelector('ix-application-header');
+    expect(header.className).toContain('mode-desktop');
   });
 });

packages/core/src/components/basic-navigation/basic-navigation.scss

@@ -34,3 +34,10 @@
     }
   }
 }
+
+:host(.mode-mobile) {
+  .content {
+    margin-left: 0px;
+    width: 100%;
+  }
+}

packages/core/src/components/basic-navigation/basic-navigation.tsx

@@ -7,7 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { Mode } from '../utils/screen/mode';
+import { screenMode } from '../utils/screen/service';
+import { Disposable } from '../utils/typed-event';
 
 @Component({
   tag: 'ix-basic-navigation',
@@ -23,14 +26,27 @@ export class BasicNavigation {
   @Prop() applicationName: string;
 
   /**
-   * Hide application header
+   * Hide application header. Will disable responsive feature of basic navigation.
    */
   @Prop() hideHeader = false;
 
+  @State() mode: Mode = 'desktop';
+
   get menu(): HTMLIxMenuElement {
     return this.hostElement.querySelector('ix-menu');
   }
 
+  private modeDisposable: Disposable;
+
+  componentWillLoad() {
+    if (this.hideHeader === false) {
+      this.modeDisposable = screenMode.onChange.on(
+        (mode) => (this.mode = mode)
+      );
+      this.mode = screenMode.mode;
+    }
+  }
+
   componentDidRender() {
     if (this.menu) {
       this.appendMenu();
@@ -39,6 +55,10 @@ export class BasicNavigation {
     }
   }
 
+  disconnectedCallback() {
+    this.modeDisposable?.dispose();
+  }
+
   private appendMenu() {
     this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
   }
@@ -52,8 +72,10 @@ export class BasicNavigation {
   render() {
     return (
       <Host
+        data-role=""
         class={{
           'hide-header': this.hideHeader,
+          [`mode-${this.mode}`]: true,
         }}
       >
         {!this.hideHeader ? (