From 8a9825c798c8e57c5841d0a313ed148eaf8cb465 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 13 Dec 2024 10:23:19 +0200
Subject: [PATCH 01/15] fix(ui5-navigation-layout): change side-collapsed
 property

---
 packages/fiori/src/NavigationLayout.ts        | 38 +++++++++++++++----
 .../src/types/NavigationLayoutCollapsed.ts    | 23 +++++++++++
 2 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 packages/fiori/src/types/NavigationLayoutCollapsed.ts

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index b96502f4bd22..e056dc333c07 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -9,6 +9,7 @@ import {
 	isTablet,
 	isCombi,
 } from "@ui5/webcomponents-base/dist/Device.js";
+import NavigationLayoutCollapsed from "./types/NavigationLayoutCollapsed.js";
 import type SideNavigation from "./SideNavigation.js";
 
 // Template
@@ -16,6 +17,7 @@ import NavigationLayoutTemplate from "./generated/templates/NavigationLayoutTemp
 
 // Styles
 import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
+import TableGrowingMode from "@ui5/webcomponents-compat/src/types/TableGrowingMode.js";
 
 /**
  * @class
@@ -54,7 +56,9 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_sideCollapsed = isPhone() || (isTablet() && !isCombi());
+	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
+
+	_sideCollapsed: `${NavigationLayoutCollapsed}` = "Auto";
 
 	/**
 	 * @private
@@ -70,11 +74,11 @@ class NavigationLayout extends UI5Element {
 
 	/**
 	 * Indicates whether the side navigation is collapsed.
-	 * @default false
+	 * @default NavigationLayoutCollapsed.Auto
 	 * @public
 	 */
-	@property({ type: Boolean })
-	set sideCollapsed(value: boolean) {
+	@property()
+	set sideCollapsed(value: `${NavigationLayoutCollapsed}`) {
 		this._sideCollapsed = value;
 
 		if (isPhone()) {
@@ -84,11 +88,21 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = value;
+			switch (value) {
+			case NavigationLayoutCollapsed.Auto:
+				sideNavigation.collapsed = this._defaultSideCollapsed;
+				break;
+			case NavigationLayoutCollapsed.Collapsed:
+				sideNavigation.collapsed = true;
+				break;
+			case NavigationLayoutCollapsed.Expanded:
+				sideNavigation.collapsed = false;
+				break;
+			}
 		}
 	}
 
-	get sideCollapsed() : boolean {
+	get sideCollapsed() : `${NavigationLayoutCollapsed}` {
 		return this._sideCollapsed;
 	}
 
@@ -121,7 +135,17 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.sideCollapsed;
+			switch (this.sideCollapsed) {
+			case NavigationLayoutCollapsed.Auto:
+				sideNavigation.collapsed = this._defaultSideCollapsed;
+				break;
+			case NavigationLayoutCollapsed.Collapsed:
+				sideNavigation.collapsed = true;
+				break;
+			case NavigationLayoutCollapsed.Expanded:
+				sideNavigation.collapsed = false;
+				break;
+			}
 		}
 	}
 }
diff --git a/packages/fiori/src/types/NavigationLayoutCollapsed.ts b/packages/fiori/src/types/NavigationLayoutCollapsed.ts
new file mode 100644
index 000000000000..f9705e987911
--- /dev/null
+++ b/packages/fiori/src/types/NavigationLayoutCollapsed.ts
@@ -0,0 +1,23 @@
+/**
+ * Specifies whether the navigation layout is in collapsed or expanded mode.
+ * @public
+ */
+enum NavigationLayoutCollapsed {
+	/**
+	 * Auto
+	 * @public
+	 */
+	Auto = "Auto",
+	/**
+	 * Collapsed
+	 * @public
+	 */
+	Collapsed = "Collapsed",
+	/**
+	 * Expanded
+	 * @public
+	 */
+	Expanded = "Expanded",
+}
+
+export default NavigationLayoutCollapsed;

From ee5cc4b8293cb7142eb14496487da26d3b8fc09b Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 13 Dec 2024 16:33:39 +0200
Subject: [PATCH 02/15] chore: add private actualSideCollapsed

---
 packages/fiori/src/NavigationLayout.ts        | 42 +++++++++----------
 .../fiori/src/themes/NavigationLayout.css     |  4 +-
 .../fiori/test/pages/NavigationLayout.html    |  2 +-
 .../fiori/NavigationLayout/Basic/main.js      |  2 +-
 4 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index c5b419543dfe..27ba015f5d3d 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -17,7 +17,6 @@ import NavigationLayoutTemplate from "./NavigationLayoutTemplate.js";
 
 // Styles
 import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
-import TableGrowingMode from "@ui5/webcomponents-compat/src/types/TableGrowingMode.js";
 
 /**
  * @class
@@ -60,6 +59,12 @@ class NavigationLayout extends UI5Element {
 
 	_sideCollapsed: `${NavigationLayoutCollapsed}` = "Auto";
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	actualSideCollapsed : boolean = false;
+
 	/**
 	 * @private
 	 */
@@ -80,6 +85,7 @@ class NavigationLayout extends UI5Element {
 	@property()
 	set sideCollapsed(value: `${NavigationLayoutCollapsed}`) {
 		this._sideCollapsed = value;
+		this.calcActualSideCollapsed();
 
 		if (isPhone()) {
 			return;
@@ -88,17 +94,7 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			switch (value) {
-			case NavigationLayoutCollapsed.Auto:
-				sideNavigation.collapsed = this._defaultSideCollapsed;
-				break;
-			case NavigationLayoutCollapsed.Collapsed:
-				sideNavigation.collapsed = true;
-				break;
-			case NavigationLayoutCollapsed.Expanded:
-				sideNavigation.collapsed = false;
-				break;
-			}
+			sideNavigation.collapsed = this.actualSideCollapsed;
 		}
 	}
 
@@ -128,6 +124,8 @@ class NavigationLayout extends UI5Element {
 	content!: Array<HTMLElement>;
 
 	onBeforeRendering() {
+		this.calcActualSideCollapsed();
+
 		if (isPhone()) {
 			return;
 		}
@@ -135,17 +133,15 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			switch (this.sideCollapsed) {
-			case NavigationLayoutCollapsed.Auto:
-				sideNavigation.collapsed = this._defaultSideCollapsed;
-				break;
-			case NavigationLayoutCollapsed.Collapsed:
-				sideNavigation.collapsed = true;
-				break;
-			case NavigationLayoutCollapsed.Expanded:
-				sideNavigation.collapsed = false;
-				break;
-			}
+			sideNavigation.collapsed = this.actualSideCollapsed;
+		}
+	}
+
+	calcActualSideCollapsed() {
+		if (this.sideCollapsed === NavigationLayoutCollapsed.Auto) {
+			this.actualSideCollapsed = this._defaultSideCollapsed;
+		} else {
+			this.actualSideCollapsed = this.sideCollapsed === NavigationLayoutCollapsed.Collapsed;
 		}
 	}
 }
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index 544ef6c4d39f..f662a3f92df9 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -52,11 +52,11 @@
 	overflow: auto;
 }
 
-:host([side-collapsed][is-phone]) .ui5-nl-aside {
+:host([actual-side-collapsed][is-phone]) .ui5-nl-aside {
 	transform: translateX(-100%);
 }
 
-:host([side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
+:host([actual-side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
 	transform: translateX(100%);
 }
 
diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html
index eea92e3d6b14..8e9678f8b516 100644
--- a/packages/fiori/test/pages/NavigationLayout.html
+++ b/packages/fiori/test/pages/NavigationLayout.html
@@ -161,7 +161,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.sideCollapsed = !nl1.sideCollapsed;
+			nl1.sideCollapsed = nl1.actualSideCollapsed ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
index 79f992749791..3f32d8b8f2f8 100644
--- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
@@ -26,7 +26,7 @@ import "@ui5/webcomponents-icons/dist/compare.js";
 import "@ui5/webcomponents-icons/dist/locked.js";
 
 document.querySelector("#startButton").addEventListener("click", function (event) {
-	nl1.sideCollapsed = !nl1.sideCollapsed;
+	nl1.sideCollapsed = nl1.actualSideCollapsed ? "Expanded" : "Collapsed";
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {

From bae7110224951f94ee3729aaac8ef16d8f96d00a Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 16 Dec 2024 13:08:39 +0200
Subject: [PATCH 03/15] chore: use "effective" word

---
 .../cypress/specs/NavigationLayout.cy.ts      | 10 +++----
 packages/fiori/src/NavigationLayout.ts        | 27 ++++++++++++-------
 .../fiori/src/themes/NavigationLayout.css     |  4 +--
 .../src/types/NavigationLayoutCollapsed.ts    |  5 ++--
 .../fiori/test/pages/NavigationLayout.html    |  2 +-
 .../fiori/NavigationLayout/Basic/main.js      |  2 +-
 6 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/fiori/cypress/specs/NavigationLayout.cy.ts b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
index 6ff02702aefa..71d1be5aea08 100644
--- a/packages/fiori/cypress/specs/NavigationLayout.cy.ts
+++ b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
@@ -76,13 +76,13 @@ describe("Rendering and interaction", () => {
 			.should("have.prop", "collapsed", false);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", true);
+			.invoke("prop", "sideCollapsed", "Collapsed");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", true);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "sideCollapsed", "Expanded");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -97,7 +97,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests initial rendering", () => {
 		cy.get("[ui5-navigation-layout]")
-			.should("have.prop", "sideCollapsed", true);
+			.should("have.prop", "effectiveSideCollapsed", true);
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -110,7 +110,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests collapsing", () => {
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "sideCollapsed", "Expanded");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
@@ -118,7 +118,7 @@ describe("Navigation Layout on Phone", () => {
 			.should("be.visible");
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", true);
+			.invoke("prop", "sideCollapsed", "Collapsed");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index 27ba015f5d3d..f7e7d28a06ae 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -63,7 +63,7 @@ class NavigationLayout extends UI5Element {
 	 * @private
 	 */
 	@property({ type: Boolean })
-	actualSideCollapsed : boolean = false;
+	_effectiveSideCollapsed : boolean = false;
 
 	/**
 	 * @private
@@ -78,14 +78,14 @@ class NavigationLayout extends UI5Element {
 	isTablet = isTablet() && !isCombi();
 
 	/**
-	 * Indicates whether the side navigation is collapsed.
+	 * Indicates whether the side navigation is collapsed mode.
 	 * @default NavigationLayoutCollapsed.Auto
 	 * @public
 	 */
 	@property()
 	set sideCollapsed(value: `${NavigationLayoutCollapsed}`) {
 		this._sideCollapsed = value;
-		this.calcActualSideCollapsed();
+		this.calcEffectiveSideCollapsed();
 
 		if (isPhone()) {
 			return;
@@ -94,7 +94,7 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.actualSideCollapsed;
+			sideNavigation.collapsed = this.effectiveSideCollapsed;
 		}
 	}
 
@@ -102,6 +102,15 @@ class NavigationLayout extends UI5Element {
 		return this._sideCollapsed;
 	}
 
+	/**
+	 * Gets whether the side navigation is collapsed.
+	 * @public
+	 * @type {boolean}
+	 */
+	get effectiveSideCollapsed() : boolean {
+		return this._effectiveSideCollapsed;
+	}
+
 	/**
 	 * Defines the header.
 	 * @public
@@ -124,7 +133,7 @@ class NavigationLayout extends UI5Element {
 	content!: Array<HTMLElement>;
 
 	onBeforeRendering() {
-		this.calcActualSideCollapsed();
+		this.calcEffectiveSideCollapsed();
 
 		if (isPhone()) {
 			return;
@@ -133,15 +142,15 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.actualSideCollapsed;
+			sideNavigation.collapsed = this.effectiveSideCollapsed;
 		}
 	}
 
-	calcActualSideCollapsed() {
+	calcEffectiveSideCollapsed() {
 		if (this.sideCollapsed === NavigationLayoutCollapsed.Auto) {
-			this.actualSideCollapsed = this._defaultSideCollapsed;
+			this._effectiveSideCollapsed = this._defaultSideCollapsed;
 		} else {
-			this.actualSideCollapsed = this.sideCollapsed === NavigationLayoutCollapsed.Collapsed;
+			this._effectiveSideCollapsed = this.sideCollapsed === NavigationLayoutCollapsed.Collapsed;
 		}
 	}
 }
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index f662a3f92df9..16bd315e117c 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -52,11 +52,11 @@
 	overflow: auto;
 }
 
-:host([actual-side-collapsed][is-phone]) .ui5-nl-aside {
+:host([_effective-side-collapsed][is-phone]) .ui5-nl-aside {
 	transform: translateX(-100%);
 }
 
-:host([actual-side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
+:host([_effective-side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
 	transform: translateX(100%);
 }
 
diff --git a/packages/fiori/src/types/NavigationLayoutCollapsed.ts b/packages/fiori/src/types/NavigationLayoutCollapsed.ts
index f9705e987911..ab7e41bac7ef 100644
--- a/packages/fiori/src/types/NavigationLayoutCollapsed.ts
+++ b/packages/fiori/src/types/NavigationLayoutCollapsed.ts
@@ -1,10 +1,11 @@
 /**
- * Specifies whether the navigation layout is in collapsed or expanded mode.
+ * Specifies the navigation layout collapsed mode.
  * @public
  */
 enum NavigationLayoutCollapsed {
 	/**
-	 * Auto
+	 * Automatically calculate the collapsed mode based on the screen device type.
+	 * `Expanded` on desktop and `Collapsed	 on tablet and phone.
 	 * @public
 	 */
 	Auto = "Auto",
diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html
index 8e9678f8b516..05838b367911 100644
--- a/packages/fiori/test/pages/NavigationLayout.html
+++ b/packages/fiori/test/pages/NavigationLayout.html
@@ -161,7 +161,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.sideCollapsed = nl1.actualSideCollapsed ? "Expanded" : "Collapsed";
+			nl1.sideCollapsed = nl1.effectiveSideCollapsed ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
index 3f32d8b8f2f8..952ff12dec01 100644
--- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
@@ -26,7 +26,7 @@ import "@ui5/webcomponents-icons/dist/compare.js";
 import "@ui5/webcomponents-icons/dist/locked.js";
 
 document.querySelector("#startButton").addEventListener("click", function (event) {
-	nl1.sideCollapsed = nl1.actualSideCollapsed ? "Expanded" : "Collapsed";
+	nl1.sideCollapsed = nl1.effectiveSideCollapsed ? "Expanded" : "Collapsed";
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {

From ddaf4a9a3921ebc21d87ba05a1522dcffb1e7863 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 16 Dec 2024 13:25:52 +0200
Subject: [PATCH 04/15] chore: fix lint error

---
 packages/fiori/src/NavigationLayout.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index f7e7d28a06ae..d3b3a1522b5f 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -105,7 +105,6 @@ class NavigationLayout extends UI5Element {
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
-	 * @type {boolean}
 	 */
 	get effectiveSideCollapsed() : boolean {
 		return this._effectiveSideCollapsed;

From 4d24a777b7e221af2a1a1ba233c169d173014f9e Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 16 Dec 2024 13:30:11 +0200
Subject: [PATCH 05/15] chore: fix lint error and docs

---
 packages/fiori/src/NavigationLayout.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index d3b3a1522b5f..0c5676526243 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -78,7 +78,7 @@ class NavigationLayout extends UI5Element {
 	isTablet = isTablet() && !isCombi();
 
 	/**
-	 * Indicates whether the side navigation is collapsed mode.
+	 * Specifies the side navigation collapsed mode.
 	 * @default NavigationLayoutCollapsed.Auto
 	 * @public
 	 */
@@ -105,6 +105,7 @@ class NavigationLayout extends UI5Element {
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
+	 * @default false
 	 */
 	get effectiveSideCollapsed() : boolean {
 		return this._effectiveSideCollapsed;

From b351294833e24276ea937bb9c374b99de185b7e6 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 17 Dec 2024 13:29:35 +0200
Subject: [PATCH 06/15] chore: rename the property and the enum

---
 .../cypress/specs/NavigationLayout.cy.ts      | 10 ++---
 packages/fiori/src/NavigationLayout.ts        | 42 +++++++++----------
 .../src/types/NavigationLayoutCollapsed.ts    | 24 -----------
 .../fiori/src/types/NavigationLayoutMode.ts   | 24 +++++++++++
 .../fiori/test/pages/NavigationLayout.html    |  2 +-
 .../test/pages/NavigationLayoutSubHeader.html |  4 +-
 .../fiori/NavigationLayout/Basic/main.js      |  2 +-
 7 files changed, 54 insertions(+), 54 deletions(-)
 delete mode 100644 packages/fiori/src/types/NavigationLayoutCollapsed.ts
 create mode 100644 packages/fiori/src/types/NavigationLayoutMode.ts

diff --git a/packages/fiori/cypress/specs/NavigationLayout.cy.ts b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
index 71d1be5aea08..cc7d2f32857b 100644
--- a/packages/fiori/cypress/specs/NavigationLayout.cy.ts
+++ b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
@@ -76,13 +76,13 @@ describe("Rendering and interaction", () => {
 			.should("have.prop", "collapsed", false);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", "Collapsed");
+			.invoke("prop", "mode", "Collapsed");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", true);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", "Expanded");
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -97,7 +97,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests initial rendering", () => {
 		cy.get("[ui5-navigation-layout]")
-			.should("have.prop", "effectiveSideCollapsed", true);
+			.should("have.prop", "effectiveMode", true);
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -110,7 +110,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests collapsing", () => {
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", "Expanded");
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
@@ -118,7 +118,7 @@ describe("Navigation Layout on Phone", () => {
 			.should("be.visible");
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", "Collapsed");
+			.invoke("prop", "mode", "Collapsed");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index 0c5676526243..a23d8f3ae057 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -9,7 +9,7 @@ import {
 	isTablet,
 	isCombi,
 } from "@ui5/webcomponents-base/dist/Device.js";
-import NavigationLayoutCollapsed from "./types/NavigationLayoutCollapsed.js";
+import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
 import type SideNavigation from "./SideNavigation.js";
 
 // Template
@@ -33,8 +33,8 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
  * ### Responsive Behavior
  *
  * On desktop and tablet devices, the side navigation remains visible and can
- * be expanded or collapsed using the `sideCollapsed` property. On phone devices, the side navigation
- * is hidden by default but can be displayed using the same `sideCollapsed` property.
+ * be expanded or collapsed using the `mode` property. On phone devices, the side navigation
+ * is hidden by default but can be displayed using the same `mode` property.
  *
  * ### ES6 Module Import
  *
@@ -55,15 +55,15 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
+	_defaultMode = isPhone() || (isTablet() && !isCombi());
 
-	_sideCollapsed: `${NavigationLayoutCollapsed}` = "Auto";
+	_mode: `${NavigationLayoutMode}` = "Auto";
 
 	/**
 	 * @private
 	 */
 	@property({ type: Boolean })
-	_effectiveSideCollapsed : boolean = false;
+	_effectiveMode : boolean = false;
 
 	/**
 	 * @private
@@ -78,14 +78,14 @@ class NavigationLayout extends UI5Element {
 	isTablet = isTablet() && !isCombi();
 
 	/**
-	 * Specifies the side navigation collapsed mode.
+	 * Specifies the side navigation mode.
 	 * @default NavigationLayoutCollapsed.Auto
 	 * @public
 	 */
 	@property()
-	set sideCollapsed(value: `${NavigationLayoutCollapsed}`) {
-		this._sideCollapsed = value;
-		this.calcEffectiveSideCollapsed();
+	set mode(value: `${NavigationLayoutMode}`) {
+		this._mode = value;
+		this.calcEffectiveMode();
 
 		if (isPhone()) {
 			return;
@@ -94,12 +94,12 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.effectiveSideCollapsed;
+			sideNavigation.collapsed = this.effectiveMode;
 		}
 	}
 
-	get sideCollapsed() : `${NavigationLayoutCollapsed}` {
-		return this._sideCollapsed;
+	get mode() : `${NavigationLayoutMode}` {
+		return this._mode;
 	}
 
 	/**
@@ -107,8 +107,8 @@ class NavigationLayout extends UI5Element {
 	 * @public
 	 * @default false
 	 */
-	get effectiveSideCollapsed() : boolean {
-		return this._effectiveSideCollapsed;
+	get effectiveMode() : boolean {
+		return this._effectiveMode;
 	}
 
 	/**
@@ -133,7 +133,7 @@ class NavigationLayout extends UI5Element {
 	content!: Array<HTMLElement>;
 
 	onBeforeRendering() {
-		this.calcEffectiveSideCollapsed();
+		this.calcEffectiveMode();
 
 		if (isPhone()) {
 			return;
@@ -142,15 +142,15 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.effectiveSideCollapsed;
+			sideNavigation.collapsed = this.effectiveMode;
 		}
 	}
 
-	calcEffectiveSideCollapsed() {
-		if (this.sideCollapsed === NavigationLayoutCollapsed.Auto) {
-			this._effectiveSideCollapsed = this._defaultSideCollapsed;
+	calcEffectiveMode() {
+		if (this.mode === NavigationLayoutMode.Auto) {
+			this._effectiveMode = this._defaultMode;
 		} else {
-			this._effectiveSideCollapsed = this.sideCollapsed === NavigationLayoutCollapsed.Collapsed;
+			this._effectiveMode = this.mode === NavigationLayoutMode.Collapsed;
 		}
 	}
 }
diff --git a/packages/fiori/src/types/NavigationLayoutCollapsed.ts b/packages/fiori/src/types/NavigationLayoutCollapsed.ts
deleted file mode 100644
index ab7e41bac7ef..000000000000
--- a/packages/fiori/src/types/NavigationLayoutCollapsed.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Specifies the navigation layout collapsed mode.
- * @public
- */
-enum NavigationLayoutCollapsed {
-	/**
-	 * Automatically calculate the collapsed mode based on the screen device type.
-	 * `Expanded` on desktop and `Collapsed	 on tablet and phone.
-	 * @public
-	 */
-	Auto = "Auto",
-	/**
-	 * Collapsed
-	 * @public
-	 */
-	Collapsed = "Collapsed",
-	/**
-	 * Expanded
-	 * @public
-	 */
-	Expanded = "Expanded",
-}
-
-export default NavigationLayoutCollapsed;
diff --git a/packages/fiori/src/types/NavigationLayoutMode.ts b/packages/fiori/src/types/NavigationLayoutMode.ts
new file mode 100644
index 000000000000..1f5c8cb6e3c0
--- /dev/null
+++ b/packages/fiori/src/types/NavigationLayoutMode.ts
@@ -0,0 +1,24 @@
+/**
+ * Specifies the navigation layout mode.
+ * @public
+ */
+enum NavigationLayoutMode {
+	/**
+	 * Automatically calculates the collapsed mode based on the screen device type.
+	 * `Expanded` on desktop and `Collapsed` on tablet and phone.
+	 * @public
+	 */
+	Auto = "Auto",
+	/**
+	 * Collapsed
+	 * @public
+	 */
+	Collapsed = "Collapsed",
+	/**
+	 * Expanded
+	 * @public
+	 */
+	Expanded = "Expanded",
+}
+
+export default NavigationLayoutMode;
diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html
index 05838b367911..9b718597d641 100644
--- a/packages/fiori/test/pages/NavigationLayout.html
+++ b/packages/fiori/test/pages/NavigationLayout.html
@@ -161,7 +161,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.sideCollapsed = nl1.effectiveSideCollapsed ? "Expanded" : "Collapsed";
+			nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
diff --git a/packages/fiori/test/pages/NavigationLayoutSubHeader.html b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
index 7e8463bb6546..651f2aa4078a 100644
--- a/packages/fiori/test/pages/NavigationLayoutSubHeader.html
+++ b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
@@ -49,7 +49,7 @@
 					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
 					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
 				</ui5-tab>
-				
+
 			</ui5-tabcontainer>
 		</div>
 		<div class="content">
@@ -142,7 +142,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.sideCollapsed = !nl1.sideCollapsed;
+			nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
index 952ff12dec01..7e6da4804f84 100644
--- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
@@ -26,7 +26,7 @@ import "@ui5/webcomponents-icons/dist/compare.js";
 import "@ui5/webcomponents-icons/dist/locked.js";
 
 document.querySelector("#startButton").addEventListener("click", function (event) {
-	nl1.sideCollapsed = nl1.effectiveSideCollapsed ? "Expanded" : "Collapsed";
+	nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {

From 2bcc1584aa1642a509cd17fa63321c3885d0e763 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 17 Dec 2024 13:32:24 +0200
Subject: [PATCH 07/15] chore: fix css

---
 packages/fiori/src/themes/NavigationLayout.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index 16bd315e117c..89bdb6ec356c 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -52,11 +52,11 @@
 	overflow: auto;
 }
 
-:host([_effective-side-collapsed][is-phone]) .ui5-nl-aside {
+:host([_effective-mode][is-phone]) .ui5-nl-aside {
 	transform: translateX(-100%);
 }
 
-:host([_effective-side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
+:host([_effective-mode][is-phone]) :dir(rtl) .ui5-nl-aside {
 	transform: translateX(100%);
 }
 

From c61e57a6ff783ae8eb95a2cf55b0effac4021363 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 17 Dec 2024 13:37:33 +0200
Subject: [PATCH 08/15] chore: remove custom setter

---
 packages/fiori/src/NavigationLayout.ts | 33 ++++++--------------------
 1 file changed, 7 insertions(+), 26 deletions(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index a23d8f3ae057..bd63ac74278a 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -57,7 +57,13 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 class NavigationLayout extends UI5Element {
 	_defaultMode = isPhone() || (isTablet() && !isCombi());
 
-	_mode: `${NavigationLayoutMode}` = "Auto";
+	/**
+	 * Specifies the side navigation mode.
+	 * @default NavigationLayoutCollapsed.Auto
+	 * @public
+	 */
+	@property()
+	mode: `${NavigationLayoutMode}` = "Auto";
 
 	/**
 	 * @private
@@ -77,31 +83,6 @@ class NavigationLayout extends UI5Element {
 	@property({ type: Boolean })
 	isTablet = isTablet() && !isCombi();
 
-	/**
-	 * Specifies the side navigation mode.
-	 * @default NavigationLayoutCollapsed.Auto
-	 * @public
-	 */
-	@property()
-	set mode(value: `${NavigationLayoutMode}`) {
-		this._mode = value;
-		this.calcEffectiveMode();
-
-		if (isPhone()) {
-			return;
-		}
-
-		const sideNavigation = this.sideContent[0];
-
-		if (sideNavigation) {
-			sideNavigation.collapsed = this.effectiveMode;
-		}
-	}
-
-	get mode() : `${NavigationLayoutMode}` {
-		return this._mode;
-	}
-
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public

From ecf744f9987ad9635a803eea62bcad19cd2090c1 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 17 Dec 2024 13:38:49 +0200
Subject: [PATCH 09/15] chore: fix docs

---
 packages/fiori/src/NavigationLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index bd63ac74278a..f520e7d2df10 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -58,7 +58,7 @@ class NavigationLayout extends UI5Element {
 	_defaultMode = isPhone() || (isTablet() && !isCombi());
 
 	/**
-	 * Specifies the side navigation mode.
+	 * Specifies the navigation mode.
 	 * @default NavigationLayoutCollapsed.Auto
 	 * @public
 	 */

From 0842c702507ab8a346d8d16d5444fc47a3310c76 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 17 Dec 2024 16:21:58 +0200
Subject: [PATCH 10/15] chore: fix docs

---
 packages/fiori/src/NavigationLayout.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index f520e7d2df10..b75d55f5076b 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -32,9 +32,10 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
  *
  * ### Responsive Behavior
  *
- * On desktop and tablet devices, the side navigation remains visible and can
- * be expanded or collapsed using the `mode` property. On phone devices, the side navigation
- * is hidden by default but can be displayed using the same `mode` property.
+ * On desktop and tablet devices, the side navigation is visible
+ * by default and can be expanded or collapsed using the `mode` property.
+ * On phone devices, the side navigation is hidden by default and can
+ * be displayed using the `mode` property.
  *
  * ### ES6 Module Import
  *

From 9a8068014009aa1e04dd064af7f405fbb3f5ec26 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 20 Dec 2024 13:54:55 +0200
Subject: [PATCH 11/15] chore: adress code comments

---
 packages/fiori/src/NavigationLayout.ts        | 19 +++++++++----------
 .../fiori/src/themes/NavigationLayout.css     |  4 ++--
 .../fiori/test/pages/NavigationLayout.html    |  4 ++--
 .../test/pages/NavigationLayoutSubHeader.html |  2 +-
 .../fiori/NavigationLayout/Basic/main.js      |  2 +-
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index b75d55f5076b..c6dd365543c7 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -56,7 +56,7 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_defaultMode = isPhone() || (isTablet() && !isCombi());
+	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
 
 	/**
 	 * Specifies the navigation mode.
@@ -70,7 +70,7 @@ class NavigationLayout extends UI5Element {
 	 * @private
 	 */
 	@property({ type: Boolean })
-	_effectiveMode : boolean = false;
+	sideCollapsed : boolean = this._defaultSideCollapsed;
 
 	/**
 	 * @private
@@ -87,10 +87,9 @@ class NavigationLayout extends UI5Element {
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
-	 * @default false
 	 */
-	get effectiveMode() : boolean {
-		return this._effectiveMode;
+	isSideCollapsed() : boolean {
+		return this.sideCollapsed;
 	}
 
 	/**
@@ -115,7 +114,7 @@ class NavigationLayout extends UI5Element {
 	content!: Array<HTMLElement>;
 
 	onBeforeRendering() {
-		this.calcEffectiveMode();
+		this.calcSideCollapsed();
 
 		if (isPhone()) {
 			return;
@@ -124,15 +123,15 @@ class NavigationLayout extends UI5Element {
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.effectiveMode;
+			sideNavigation.collapsed = this.isSideCollapsed();
 		}
 	}
 
-	calcEffectiveMode() {
+	calcSideCollapsed() {
 		if (this.mode === NavigationLayoutMode.Auto) {
-			this._effectiveMode = this._defaultMode;
+			this.sideCollapsed = this._defaultSideCollapsed;
 		} else {
-			this._effectiveMode = this.mode === NavigationLayoutMode.Collapsed;
+			this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;
 		}
 	}
 }
diff --git a/packages/fiori/src/themes/NavigationLayout.css b/packages/fiori/src/themes/NavigationLayout.css
index 89bdb6ec356c..544ef6c4d39f 100644
--- a/packages/fiori/src/themes/NavigationLayout.css
+++ b/packages/fiori/src/themes/NavigationLayout.css
@@ -52,11 +52,11 @@
 	overflow: auto;
 }
 
-:host([_effective-mode][is-phone]) .ui5-nl-aside {
+:host([side-collapsed][is-phone]) .ui5-nl-aside {
 	transform: translateX(-100%);
 }
 
-:host([_effective-mode][is-phone]) :dir(rtl) .ui5-nl-aside {
+:host([side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
 	transform: translateX(100%);
 }
 
diff --git a/packages/fiori/test/pages/NavigationLayout.html b/packages/fiori/test/pages/NavigationLayout.html
index 7136cac4457b..a0e0c4eb3d35 100644
--- a/packages/fiori/test/pages/NavigationLayout.html
+++ b/packages/fiori/test/pages/NavigationLayout.html
@@ -161,7 +161,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
+			nl1.mode = nl1.isSideCollapsed() ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
@@ -171,7 +171,7 @@ <h2>Sub Item 2</h2>
 
 			const contentItems = document.querySelectorAll(".contentItem"),
 			divId = "cont" + event.detail.item.getAttribute("href").replace("#", "").charAt(0).toUpperCase() + event.detail.item.getAttribute("href").replace("#", "").slice(1);
-			
+
 			contentItems.forEach(item => {
 				item.classList.remove("contentItemVisible");
 			});
diff --git a/packages/fiori/test/pages/NavigationLayoutSubHeader.html b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
index 651f2aa4078a..e5a0e35b8a2b 100644
--- a/packages/fiori/test/pages/NavigationLayoutSubHeader.html
+++ b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
@@ -142,7 +142,7 @@ <h2>Sub Item 2</h2>
 
 	<script>
 		document.querySelector("#startButton").addEventListener("click", function (event) {
-			nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
+			nl1.mode = nl1.isSideCollapsed() ? "Expanded" : "Collapsed";
 		});
 
 		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
index 1c891417381b..bba0391a5044 100644
--- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
@@ -26,7 +26,7 @@ import "@ui5/webcomponents-icons/dist/compare.js";
 import "@ui5/webcomponents-icons/dist/locked.js";
 
 document.querySelector("#startButton").addEventListener("click", function (event) {
-	nl1.mode = nl1.effectiveMode ? "Expanded" : "Collapsed";
+	nl1.mode = nl1.isSideCollapsed() ? "Expanded" : "Collapsed";
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {

From abb1b76f69d42554bc0184d75b7036e8437972b7 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 20 Dec 2024 14:08:25 +0200
Subject: [PATCH 12/15] chore: fix test

---
 packages/fiori/cypress/specs/NavigationLayout.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/cypress/specs/NavigationLayout.cy.ts b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
index cc7d2f32857b..c2310334d258 100644
--- a/packages/fiori/cypress/specs/NavigationLayout.cy.ts
+++ b/packages/fiori/cypress/specs/NavigationLayout.cy.ts
@@ -97,7 +97,7 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests initial rendering", () => {
 		cy.get("[ui5-navigation-layout]")
-			.should("have.prop", "effectiveMode", true);
+			.should("have.prop", "sideCollapsed", true);
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);

From 658a67a0761e46b77477135ec2aa08d6d625ec46 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 6 Jan 2025 10:22:45 +0200
Subject: [PATCH 13/15] chore: address code comments

---
 packages/fiori/src/NavigationLayout.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index c6dd365543c7..bf6f69e5ae20 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -89,6 +89,7 @@ class NavigationLayout extends UI5Element {
 	 * @public
 	 */
 	isSideCollapsed() : boolean {
+		this.calcSideCollapsed();
 		return this.sideCollapsed;
 	}
 

From 640f15749551f3f3d10cd020969823ae0ac17aef Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 6 Jan 2025 11:00:30 +0200
Subject: [PATCH 14/15] chore: fix jsdoc

---
 packages/fiori/src/NavigationLayout.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index bf6f69e5ae20..f92b9b0fcd6b 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -60,7 +60,7 @@ class NavigationLayout extends UI5Element {
 
 	/**
 	 * Specifies the navigation mode.
-	 * @default NavigationLayoutCollapsed.Auto
+	 * @default "Auto"
 	 * @public
 	 */
 	@property()

From 70dde21e98e5be6d88e3a133fbb85a87f6566fdf Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Mon, 6 Jan 2025 13:07:26 +0200
Subject: [PATCH 15/15] chore: address code comments

---
 packages/fiori/src/NavigationLayout.ts                      | 2 +-
 packages/fiori/src/types/NavigationLayoutMode.ts            | 6 +++---
 .../docs/_samples/fiori/NavigationLayout/Basic/main.js      | 4 +++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/fiori/src/NavigationLayout.ts b/packages/fiori/src/NavigationLayout.ts
index f92b9b0fcd6b..7dbbc93e0274 100644
--- a/packages/fiori/src/NavigationLayout.ts
+++ b/packages/fiori/src/NavigationLayout.ts
@@ -59,7 +59,7 @@ class NavigationLayout extends UI5Element {
 	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
 
 	/**
-	 * Specifies the navigation mode.
+	 * Specifies the navigation layout mode.
 	 * @default "Auto"
 	 * @public
 	 */
diff --git a/packages/fiori/src/types/NavigationLayoutMode.ts b/packages/fiori/src/types/NavigationLayoutMode.ts
index 1f5c8cb6e3c0..6509326b25de 100644
--- a/packages/fiori/src/types/NavigationLayoutMode.ts
+++ b/packages/fiori/src/types/NavigationLayoutMode.ts
@@ -4,18 +4,18 @@
  */
 enum NavigationLayoutMode {
 	/**
-	 * Automatically calculates the collapsed mode based on the screen device type.
+	 * Automatically calculates the navigation layout mode based on the screen device type.
 	 * `Expanded` on desktop and `Collapsed` on tablet and phone.
 	 * @public
 	 */
 	Auto = "Auto",
 	/**
-	 * Collapsed
+	 * Collapsed side navigation.
 	 * @public
 	 */
 	Collapsed = "Collapsed",
 	/**
-	 * Expanded
+	 * Expanded side navigation.
 	 * @public
 	 */
 	Expanded = "Expanded",
diff --git a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
index bba0391a5044..06d3c9a2f998 100644
--- a/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/NavigationLayout/Basic/main.js
@@ -25,8 +25,10 @@ import "@ui5/webcomponents-icons/dist/document-text.js";
 import "@ui5/webcomponents-icons/dist/compare.js";
 import "@ui5/webcomponents-icons/dist/locked.js";
 
+import NavigationLayoutMode from "@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js";
+
 document.querySelector("#startButton").addEventListener("click", function (event) {
-	nl1.mode = nl1.isSideCollapsed() ? "Expanded" : "Collapsed";
+	nl1.mode = nl1.isSideCollapsed() ? NavigationLayoutMode.Expanded : NavigationLayoutMode.Collapsed;
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {