fix(ui5-navigation-layout): resolve mobile phone display issues in landscape mode (#12900)

* fix(ui5-navigation-layout): resolve display issues in phone landscape mode

* chore: improve docs

* chore: adress code comments

Author: TeodorTaushanov

packages/fiori/src/NavigationLayout.ts

@@ -3,6 +3,7 @@ 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 } from "@ui5/webcomponents-base/dist/Device.js";
 import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
 import type SideNavigation from "./SideNavigation.js";
 
@@ -28,9 +29,9 @@ const SCREEN_WIDTH_BREAKPOINT = 600;
  *
  * ### Responsive Behavior
  *
- * On larger screens (screen width of 600px or more), the side navigation is visible
+ * On larger screens with a width of 600px or more, excluding mobile phone devices, the side navigation is visible
  * by default and can be expanded or collapsed using the `mode` property.
- * On small screens (screen width of 599px or less), the side navigation is hidden by
+ * On mobile phone devices and screens with a width of 599px or less, the side navigation is hidden by
  * default and can be displayed using the `mode` property.
  *
  * ### ES6 Module Import
@@ -63,14 +64,20 @@ class NavigationLayout extends UI5Element {
 	 * @private
 	 */
 	@property({ type: Boolean })
-	sideCollapsed : boolean = window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
+	sideCollapsed : boolean = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
 
 	/**
 	 * @private
 	 */
 	@property({ type: Boolean })
 	hasSideNavigation = false;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	isPhone = isPhone();
+
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
@@ -114,7 +121,7 @@ class NavigationLayout extends UI5Element {
 
 	calcSideCollapsed() {
 		if (this.mode === NavigationLayoutMode.Auto) {
-			this.sideCollapsed = window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
+			this.sideCollapsed = isPhone() || window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
 		} else {
 			this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;
 		}

packages/fiori/src/themes/NavigationLayout.css

@@ -64,3 +64,28 @@
 		transform: translateX(100%);
 	}
 }
+
+:host([is-phone]) .ui5-nl-aside {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+}
+
+:host([is-phone]) ::slotted([ui5-side-navigation][slot="sideContent"]) {
+	width: 100%;
+	box-shadow: none;
+}
+
+:host([side-collapsed][is-phone]) .ui5-nl-aside {
+	transform: translateX(-100%);
+}
+
+:host([side-collapsed][is-phone]) :dir(rtl) .ui5-nl-aside {
+	transform: translateX(100%);
+}
+
+:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
+	padding-inline: 0.875rem 1rem;
+}