chore: change implementation to reflect resizing

Author: LidiyaGeorgieva

packages/fiori/src/NavigationLayout.ts

@@ -71,12 +71,6 @@ class NavigationLayout extends UI5Element {
 	@property({ type: Boolean })
 	hasSideNavigation = false;
 
-	/**
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isLayoutS = window.innerWidth < 600;
-
 	/**
 	 * Gets whether the side navigation is collapsed.
 	 * @public
@@ -110,7 +104,7 @@ class NavigationLayout extends UI5Element {
 	onBeforeRendering() {
 		this.calcSideCollapsed();
 
-		if (this.isLayoutS) {
+		if (window.innerWidth < 600) {
 			return;
 		}
 

packages/fiori/src/SideNavigation.ts

@@ -186,13 +186,6 @@ class SideNavigation extends UI5Element {
 	@property({ type: Object })
 	_menuPopoverItems: Array<SideNavigationItem> = [];
 
-	/**
-	 * Defines if the component is rendered on a mobile device.
-	 * @private
-	 */
-	@property({ type: Boolean })
-	isLayoutS = window.innerWidth < 600;
-
 	_isOverflow = false;
 	_flexibleItemNavigation: ItemNavigation;
 	_fixedItemNavigation: ItemNavigation;

packages/fiori/src/themes/NavigationLayout.css

@@ -32,31 +32,39 @@
 	z-index: 2;
 }
 
-:host([is-layout-s]) .ui5-nl-aside {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	width: 100%;
+@media (width < 600px) {
+	:host .ui5-nl-aside {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+	}
 }
 
-:host([is-layout-s]) ::slotted([ui5-side-navigation][slot="sideContent"]) {
-	width: 100%;
-	box-shadow: none;
+@media (width < 600px) {
+	:host ::slotted([ui5-side-navigation][slot="sideContent"]) {
+		width: 100%;
+		box-shadow: none;
+	}
 }
 
 .ui5-nl-content {
 	flex: 1;
 	min-width: 0;
 	overflow: auto;
 }
-
-:host([side-collapsed][is-layout-s]) .ui5-nl-aside {
-	transform: translateX(-100%);
+@media (width < 600px) {
+	:host([side-collapsed]) .ui5-nl-aside {
+		transform: translateX(-100%);
+	}	
 }
 
-:host([side-collapsed][is-layout-s]) :dir(rtl) .ui5-nl-aside {
-	transform: translateX(100%);
+@media (width < 600px) {
+	:host([side-collapsed]) :dir(rtl) .ui5-nl-aside {
+		transform: translateX(100%);
+	}
+
 }
 
 :host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {

packages/fiori/src/themes/SideNavigation.css

@@ -20,10 +20,13 @@
 	width: var(--_ui5_side_navigation_collapsed_width);
 }
 
-:host([is-layout-s]) {
-	width: 100%;
+@media (width < 600px) {
+	:host(:not([hidden])) {
+		width: 100%;
+	}
 }
 
+
 .ui5-sn-root {
 	height: 100%;
 	display: flex;