feat(ui5-navigation-layout): introduce breakpoint-based responsive behavior (#12817)

Responsiveness has been changed from device-based detection to screen-width breakpoints.

Jira: 3570

Author: LidiyaGeorgieva

packages/fiori/cypress/specs/NavigationLayout.cy.tsx

@@ -18,7 +18,67 @@ function Sample() {
 
 			<SideNavigationGroup text="Group 1" expanded={true}>
 				<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
-				<SideNavigationItem text="Item 2" href="#item2"icon={home}></SideNavigationItem>
+				<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
+				<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
+			</SideNavigationGroup>
+
+			<SideNavigationItem
+				slot="fixedItems"
+				text="Legal"
+				href="https://www.sap.com/about/legal/impressum.html"
+				target="_blank"
+				icon={home}>
+			</SideNavigationItem>
+		</SideNavigation>
+
+		<div>
+			Content
+		</div>
+	</NavigationLayout>;
+}
+
+function SampleWithCollapsedMode() {
+	return <NavigationLayout id="nl1" mode="Collapsed">
+		<ShellBar slot="header" primaryTitle="UI5 Web Components">
+			<Button icon={menu} slot="startButton" id="startButton"></Button>
+		</ShellBar>
+
+		<SideNavigation id="sn1" slot="sideContent">
+			<SideNavigationItem text="Home" href="#home" icon={home}></SideNavigationItem>
+
+			<SideNavigationGroup text="Group 1" expanded={true}>
+				<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
+				<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
+				<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
+			</SideNavigationGroup>
+
+			<SideNavigationItem
+				slot="fixedItems"
+				text="Legal"
+				href="https://www.sap.com/about/legal/impressum.html"
+				target="_blank"
+				icon={home}>
+			</SideNavigationItem>
+		</SideNavigation>
+
+		<div>
+			Content
+		</div>
+	</NavigationLayout>;
+}
+
+function SampleWithExpandedMode() {
+	return <NavigationLayout id="nl1" mode="Expanded">
+		<ShellBar slot="header" primaryTitle="UI5 Web Components">
+			<Button icon={menu} slot="startButton" id="startButton"></Button>
+		</ShellBar>
+
+	<SideNavigation id="sn1" slot="sideContent">
+			<SideNavigationItem text="Home" href="#home" icon={home}></SideNavigationItem>
+
+			<SideNavigationGroup text="Group 1" expanded={true}>
+				<SideNavigationItem text="Item 1" href="#item1" icon={home}></SideNavigationItem>
+				<SideNavigationItem text="Item 2" href="#item2" icon={home}></SideNavigationItem>
 				<SideNavigationItem text="Item 3" href="#item3" icon={home}></SideNavigationItem>
 			</SideNavigationGroup>
 
@@ -38,11 +98,10 @@ function Sample() {
 }
 
 describe("Rendering and interaction", () => {
-	beforeEach(() => {
-		cy.mount(<Sample />);
-	});
 
 	it("tests initial rendering", () => {
+		cy.mount(<Sample />);
+
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
 			.find(".ui5-nl-root")
@@ -69,36 +128,46 @@ describe("Rendering and interaction", () => {
 			.should("exist");
 	});
 
-	// it("tests collapsing", () => {
-	// 	cy.get("[ui5-side-navigation]")
-	// 		.should("have.prop", "collapsed", false);
+	it("tests collapsing", () => {
+		cy.mount(<Sample />);
+
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", false);
+
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "mode", "Collapsed");
+
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", true);
 
-	// 	cy.get("[ui5-navigation-layout]")
-	// 		.invoke("prop", "mode", "Collapsed");
+		cy.get("[ui5-navigation-layout]")
+			.invoke("prop", "mode", "Expanded");
 
-	// 	cy.get("[ui5-side-navigation]")
-	// 		.should("have.prop", "collapsed", true);
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", false);
+	});
 
-	// 	cy.get("[ui5-navigation-layout]")
-	// 		.invoke("prop", "mode", "Expanded");
+	it("tests that initial mode=Collapsed overrides default expand/collapse behavior", () => {
+		cy.mount(<SampleWithCollapsedMode />);
 
-	// 	cy.get("[ui5-side-navigation]")
-	// 		.should("have.prop", "collapsed", false);
-	// });
+		cy.get("[ui5-side-navigation]")
+			.should("have.prop", "collapsed", true);
+	});
 });
 
-describe("Navigation Layout on Phone", () => {
+describe("Navigation Layout on Small screens (599px or less)", () => {
 	beforeEach(() => {
-		cy.ui5SimulateDevice("phone");
-		cy.mount(<Sample />);
+		cy.viewport(500, 1080);
 	});
 
 	it("tests initial rendering", () => {
+		cy.mount(<Sample />);
+
 		cy.get("[ui5-navigation-layout]")
 			.should("have.prop", "sideCollapsed", true);
 
 		cy.get("[ui5-side-navigation]")
-			.should("have.prop", "collapsed", false);
+			.should("have.prop", "collapsed", true);
 
 		cy.get("[ui5-navigation-layout]")
 			.shadow()
@@ -107,6 +176,8 @@ describe("Navigation Layout on Phone", () => {
 	});
 
 	it("tests collapsing", () => {
+		cy.mount(<Sample />);
+
 		cy.get("[ui5-navigation-layout]")
 			.invoke("prop", "mode", "Expanded");
 
@@ -123,4 +194,13 @@ describe("Navigation Layout on Phone", () => {
 			.find(".ui5-nl-aside")
 			.should("not.be.visible");
 	});
+
+	it("tests that initial mode=Expanded overrides default expand/collapse behavior", () => {
+		cy.mount(<SampleWithExpandedMode />);
+
+		cy.get("[ui5-navigation-layout]")
+			.shadow()
+			.find(".ui5-nl-aside")
+			.should("be.visible");
+	});
 });

packages/fiori/src/NavigationLayout.ts

@@ -3,11 +3,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import {
-	isPhone,
-	isTablet,
-	isCombi,
-} from "@ui5/webcomponents-base/dist/Device.js";
 import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
 import type SideNavigation from "./SideNavigation.js";
 
@@ -31,10 +26,10 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
  *
  * ### Responsive Behavior
  *
- * On desktop and tablet devices, the side navigation is visible
+ * On larger screens (screen width of 600px or more), 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.
+ * On small screens (screen width of 599px or less), the side navigation is hidden by
+ * default and can be displayed using the `mode` property.
  *
  * ### ES6 Module Import
  *
@@ -54,7 +49,7 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
+	_defaultSideCollapsed = window.innerWidth < 600; // Small screens (599px or less)
 
 	/**
 	 * Specifies the navigation layout mode.
@@ -76,18 +71,6 @@ class NavigationLayout extends UI5Element {
 	@property({ type: Boolean })
 	hasSideNavigation = false;
 
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isPhone = isPhone();
-
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isTablet = isTablet() && !isCombi();
-
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
@@ -121,10 +104,6 @@ class NavigationLayout extends UI5Element {
 	onBeforeRendering() {
 		this.calcSideCollapsed();
 
-		if (isPhone()) {
-			return;
-		}
-
 		const sideNavigation = this.sideContent[0];
 		this.hasSideNavigation = !!sideNavigation;
 

packages/fiori/src/SideNavigation.ts

@@ -11,11 +11,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import {
-	isPhone,
-	isTablet,
-	isCombi,
-} from "@ui5/webcomponents-base/dist/Device.js";
 
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
 import type SideNavigationItemBase from "./SideNavigationItemBase.js";
@@ -77,8 +72,8 @@ type PopupSideNavigationItem = SideNavigationItem & { associatedItem: SideNaviga
  * The `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.
  *
  * Using it standalone may not match the intended design and functionality.
- * For example, the side navigation may not exhibit the correct behavior on phones and tablets.
- * Padding of the `ui5-shellbar` will not match the padding of the side navigation.
+ * For example, the side navigation may not exhibit the correct behavior on smaller screens.
+ * Additionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.
  *
  * ### Keyboard Handling
  *
@@ -128,11 +123,12 @@ class SideNavigation extends UI5Element {
 	/**
 	 * Defines whether the `ui5-side-navigation` is expanded or collapsed.
 	 *
-	 * **Note:** The collapsed mode is not supported on phones.
+	 * **Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in
+	 * expanded mode the side navigation will take the whole width of the screen.
 	 * The `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`
 	 * component to ensure proper responsive behavior. If you choose not to use the
 	 * `ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,
-	 * particularly for phones where the collapsed mode should not be used.
+	 * particularly for smaller screens where the collapsed mode should not be used.
 	 *
 	 * @public
 	 * @default false
@@ -190,23 +186,10 @@ class SideNavigation extends UI5Element {
 	@property({ type: Object })
 	_menuPopoverItems: Array<SideNavigationItem> = [];
 
-	/**
-	 * Defines if the component is rendered on a mobile device.
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isPhone = isPhone();
-
 	_isOverflow = false;
 	_flexibleItemNavigation: ItemNavigation;
 	_fixedItemNavigation: ItemNavigation;
 
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isTouchDevice = false;
-
 	@i18n("@ui5/webcomponents-fiori")
 	static i18nBundle: I18nBundle;
 
@@ -492,16 +475,17 @@ class SideNavigation extends UI5Element {
 
 	onEnterDOM() {
 		ResizeHandler.register(this, this._handleResizeBound);
-
-		this.isTouchDevice = isPhone() || (isTablet() && !isCombi());
 	}
 
 	onExitDOM() {
 		ResizeHandler.deregister(this, this._handleResizeBound);
 	}
 
 	handleResize() {
-		this._updateOverflowItems();
+		// In smaller screen the side navigation hidden when collapsed and there is no overflow items
+		if (window.innerWidth > 600) {
+			this._updateOverflowItems();
+		}
 	}
 
 	_updateOverflowItems() {
@@ -521,6 +505,9 @@ class SideNavigation extends UI5Element {
 		const overflowItems = this.overflowItems;
 
 		let itemsHeight = overflowItems.reduce<number>((sum, itemRef) => {
+			if (!itemRef) {
+				return sum;
+			}
 			itemRef.classList.remove("ui5-sn-item-hidden");
 			return sum + itemRef.offsetHeight;
 		}, 0);
@@ -548,7 +535,7 @@ class SideNavigation extends UI5Element {
 		}
 
 		overflowItems.forEach(item => {
-			if (item === selectedItem) {
+			if (!item || item === selectedItem) {
 				return;
 			}
 
@@ -682,7 +669,7 @@ class SideNavigation extends UI5Element {
 		const result: Array<SideNavigationItem> = [];
 
 		this.overflowItems.forEach(item => {
-			if (isInstanceOfSideNavigationItem(item) && item.classList.contains(overflowClass)) {
+			if (item && isInstanceOfSideNavigationItem(item) && item.classList.contains(overflowClass)) {
 				result.push(item);
 			}
 		});