fix(core/map-navigation): suppress responsive behavior (#810)

siemens · Oct 6, 2023 · e7d702d · e7d702d
1 parent 6ee1d11
commit e7d702d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
@@ -9,7 +9,9 @@
 
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { applicationLayoutService } from '../utils/application-layout';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
 import { Breakpoint } from '../utils/breakpoints';
+import { useContextConsumer } from '../utils/context';
 import { menuController } from '../utils/menu-service/menu-service';
 import { Disposable } from '../utils/typed-event';
 
@@ -29,18 +31,34 @@ export class ApplicationHeader {
   @State() breakpoint: Breakpoint = 'lg';
   @State() menuExpanded = false;
 
+  @State() suppressResponsive = false;
+
   private menuDisposable?: Disposable;
   private modeDisposable?: Disposable;
 
   componentWillLoad() {
+    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+      if (ctx?.host === 'map-navigation') {
+        this.suppressResponsive = true;
+        this.breakpoint = 'md';
+        return;
+      }
+
+      this.breakpoint = applicationLayoutService.breakpoint;
+    });
+
     this.menuDisposable = menuController.expandChange.on((show) => {
       this.menuExpanded = show;
     });
 
     this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      if (this.suppressResponsive) {
+        this.breakpoint = 'md';
+        return;
+      }
+
       this.breakpoint = mode;
     });
-    this.breakpoint = applicationLayoutService.breakpoint;
   }
 
   componentDidLoad() {
@@ -83,7 +101,7 @@ export class ApplicationHeader {
         class={{ [`breakpoint-${this.breakpoint}`]: true }}
         slot="application-header"
       >
-        {this.breakpoint === 'sm' ? (
+        {this.breakpoint === 'sm' && this.suppressResponsive === false ? (
           <ix-burger-menu
             onClick={() => this.onMenuClick()}
             expanded={this.menuExpanded}

diff --git a/packages/core/src/components/application-header/test/application-headet.ct.ts b/packages/core/src/components/application-header/test/application-headet.ct.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { expect } from '@playwright/test';
-import { test } from '@utils/test';
+import { test, viewPorts } from '@utils/test';
 
 test('renders', async ({ mount, page }) => {
   page.setViewportSize({
@@ -26,3 +26,22 @@ test('renders', async ({ mount, page }) => {
   await expect(header).toBeVisible();
   await expect(header).toHaveClass(/breakpoint-lg/);
 });
+
+test('not response inside map navigation', async ({ mount, page }) => {
+  page.setViewportSize(viewPorts.sm);
+  await mount(
+    `
+    <ix-map-navigation applicationName="TEst">
+      <div slot="logo">Test</div>
+      <ix-menu>
+        <ix-menu-item>Test</ix-menu-item>
+      </ix-menu>
+    </ix-map-navigation>
+    `
+  );
+  const header = page.locator('ix-map-navigation ix-application-header');
+  const burger = header.locator('ix-burger-menu');
+
+  await expect(burger).not.toBeVisible();
+  await expect(header).toHaveClass(/breakpoint-md/);
+});