From 7e309953d8b76b80f16d7cfa417aa3703627b0fe Mon Sep 17 00:00:00 2001 From: Lidiya Georgieva Date: Thu, 8 Jan 2026 17:19:32 +0200 Subject: [PATCH] fix(ui5-navigation-layout): check the screen width again when calculating the collapsed state The behaviour in the documentation page https://ui5.github.io/webcomponents/nightly/components/fiori/NavigationLayout/ show that sometimes initially the window.innerWidth is 0. This breaks the responsiveness logic. To fix it I added check of the the screen width again when calculating the collapsed state. --- packages/fiori/src/NavigationLayout.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts index e94326a6db38..d0e1b52a7cee 100644 --- a/packages/fiori/src/NavigationLayout.ts +++ b/packages/fiori/src/NavigationLayout.ts @@ -51,8 +51,6 @@ const SCREEN_WIDTH_BREAKPOINT = 600; template: NavigationLayoutTemplate, }) class NavigationLayout extends UI5Element { - _defaultSideCollapsed = window.innerWidth < SCREEN_WIDTH_BREAKPOINT; - /** * Specifies the navigation layout mode. * @default "Auto" @@ -65,7 +63,7 @@ class NavigationLayout extends UI5Element { * @private */ @property({ type: Boolean }) - sideCollapsed : boolean = this._defaultSideCollapsed; + sideCollapsed : boolean = window.innerWidth < SCREEN_WIDTH_BREAKPOINT; /** * @private @@ -116,7 +114,7 @@ class NavigationLayout extends UI5Element { calcSideCollapsed() { if (this.mode === NavigationLayoutMode.Auto) { - this.sideCollapsed = this._defaultSideCollapsed; + this.sideCollapsed = window.innerWidth < SCREEN_WIDTH_BREAKPOINT; } else { this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed; }