chore(ui5-navigation-layout): add constant for the screen width (#12857)

Replace hard‑coded 600px with SCREEN_WIDTH_BREAKPOINT

Jira: 3570

Author: LidiyaGeorgieva

packages/fiori/src/NavigationLayout.ts

@@ -12,6 +12,8 @@ import NavigationLayoutTemplate from "./NavigationLayoutTemplate.js";
 // Styles
 import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 
+const SCREEN_WIDTH_BREAKPOINT = 600;
+
 /**
  * @class
  *
@@ -49,7 +51,7 @@ import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
 	template: NavigationLayoutTemplate,
 })
 class NavigationLayout extends UI5Element {
-	_defaultSideCollapsed = window.innerWidth < 600; // Small screens (599px or less)
+	_defaultSideCollapsed = window.innerWidth < SCREEN_WIDTH_BREAKPOINT;
 
 	/**
 	 * Specifies the navigation layout mode.

packages/fiori/src/SideNavigation.ts

@@ -38,6 +38,7 @@ import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
 import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js";
 
 const PAGE_UP_DOWN_SIZE = 10;
+const SCREEN_WIDTH_BREAKPOINT = 600;
 
 type SideNavigationPopoverContents = {
 	item: SideNavigationItem,
@@ -483,7 +484,7 @@ class SideNavigation extends UI5Element {
 
 	handleResize() {
 		// In smaller screen the side navigation hidden when collapsed and there is no overflow items
-		if (window.innerWidth > 600) {
+		if (window.innerWidth > SCREEN_WIDTH_BREAKPOINT) {
 			this._updateOverflowItems();
 		}
 	}

packages/fiori/src/types/NavigationLayoutMode.ts

@@ -4,7 +4,7 @@
  */
 enum NavigationLayoutMode {
 	/**
-	 * Automatically calculates the navigation layout mode based on the screen device type.
+	 * Automatically calculates the navigation layout mode based on the screen width.
 	 * `Collapsed` on small screens (screen width of 599px or less) and `Expanded` on larger screens (screen width of 600px or more).
 	 * @public
 	 */