fix(ui5-navigation-layout): replace "sideCollapsed" property with "mo…

…de" property (#10390) * fix(ui5-navigation-layout): change side-collapsed property
SAP · Jan 7, 2025 · ae562dd · ae562dd
1 parent 9f5a67a
commit ae562dd
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 33 deletions.
diff --git 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", "mode", "Collapsed");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", true);
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-side-navigation]")
 			.should("have.prop", "collapsed", false);
@@ -110,15 +110,15 @@ describe("Navigation Layout on Phone", () => {
 
 	it("tests collapsing", () => {
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", false);
+			.invoke("prop", "mode", "Expanded");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
 			.find(".ui5-nl-aside")
 			.should("be.visible");
 
 		cy.get("[ui5-navigation-layout]")
-			.invoke("prop", "sideCollapsed", true);
+			.invoke("prop", "mode", "Collapsed");
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()

diff --git 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 NavigationLayoutMode from "./types/NavigationLayoutMode.js";
 import type SideNavigation from "./SideNavigation.js";
 
 // Template
@@ -31,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 `sideCollapsed` property. On phone devices, the side navigation
- * is hidden by default but can be displayed using the same `sideCollapsed` 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
  *
@@ -54,7 +56,21 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_sideCollapsed = isPhone() || (isTablet() && !isCombi());
+	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
+
+	/**
+	 * Specifies the navigation layout mode.
+	 * @default "Auto"
+	 * @public
+	 */
+	@property()
+	mode: `${NavigationLayoutMode}` = "Auto";
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	sideCollapsed : boolean = this._defaultSideCollapsed;
 
 	/**
 	 * @private
@@ -69,27 +85,12 @@ class NavigationLayout extends UI5Element {
 	isTablet = isTablet() && !isCombi();
 
 	/**
-	 * Indicates whether the side navigation is collapsed.
-	 * @default false
+	 * Gets whether the side navigation is collapsed.
 	 * @public
 	 */
-	@property({ type: Boolean })
-	set sideCollapsed(value: boolean) {
-		this._sideCollapsed = value;
-
-		if (isPhone()) {
-			return;
-		}
-
-		const sideNavigation = this.sideContent[0];
-
-		if (sideNavigation) {
-			sideNavigation.collapsed = value;
-		}
-	}
-
-	get sideCollapsed() : boolean {
-		return this._sideCollapsed;
+	isSideCollapsed() : boolean {
+		this.calcSideCollapsed();
+		return this.sideCollapsed;
 	}
 
 	/**
@@ -114,14 +115,24 @@ class NavigationLayout extends UI5Element {
 	content!: Array<HTMLElement>;
 
 	onBeforeRendering() {
+		this.calcSideCollapsed();
+
 		if (isPhone()) {
 			return;
 		}
 
 		const sideNavigation = this.sideContent[0];
 
 		if (sideNavigation) {
-			sideNavigation.collapsed = this.sideCollapsed;
+			sideNavigation.collapsed = this.isSideCollapsed();
+		}
+	}
+
+	calcSideCollapsed() {
+		if (this.mode === NavigationLayoutMode.Auto) {
+			this.sideCollapsed = this._defaultSideCollapsed;
+		} else {
+			this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;
 		}
 	}
 }

diff --git a/packages/fiori/src/types/NavigationLayoutMode.ts b/packages/fiori/src/types/NavigationLayoutMode.ts
@@ -0,0 +1,24 @@
+/**
+ * Specifies the navigation layout mode.
+ * @public
+ */
+enum NavigationLayoutMode {
+	/**
+	 * 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 side navigation.
+	 * @public
+	 */
+	Collapsed = "Collapsed",
+	/**
+	 * Expanded side navigation.
+	 * @public
+	 */
+	Expanded = "Expanded",
+}
+
+export default NavigationLayoutMode;
diff --git 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.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
@@ -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.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
@@ -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.sideCollapsed = !nl1.sideCollapsed;
+	nl1.mode = nl1.isSideCollapsed() ? NavigationLayoutMode.Expanded : NavigationLayoutMode.Collapsed;
 });
 
 document.querySelector("#sn1").addEventListener("selection-change", function (event) {