From 39375afcac20774f187318a2e9bd441821118236 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Thu, 5 Oct 2023 11:58:48 +0200
Subject: [PATCH] fix(core/map-navigation): suppress responsive behavior
---
.../application-header/application-header.tsx | 22 +++++++++++++++++--
.../test/application-headet.ct.ts | 21 +++++++++++++++++-
2 files changed, 40 insertions(+), 3 deletions(-)
diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
index 9db9f1ae400..11fe3862404 100644
--- 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
index b9e5ddc811c..b3a70492a59 100644
--- 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/);
+});