feat(ui5-navigation-layout): adjust shellbar padding when side navigation is present

packages/fiori/src/NavigationLayout.ts

@@ -72,6 +72,12 @@ class NavigationLayout extends UI5Element {
 	@property({ type: Boolean })
 	sideCollapsed : boolean = this._defaultSideCollapsed;
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	hasSideNavigation = false;
+
 	/**
 	 * @private
 	 */
@@ -122,6 +128,7 @@ class NavigationLayout extends UI5Element {
 		}
 
 		const sideNavigation = this.sideContent[0];
+		this.hasSideNavigation = !!sideNavigation;
 
 		if (sideNavigation) {
 			sideNavigation.collapsed = this.isSideCollapsed();

packages/fiori/src/SideNavigation.ts

@@ -75,9 +75,11 @@ type PopupSideNavigationItem = SideNavigationItem & { associatedItem: SideNaviga
  * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
  * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
  *
- * The `ui5-side-navigation` component is intended for use within an `ui5-navigation-layout` component.
- * While it can function independently, it is recommended to use it with
- * the `ui5-navigation-layout` for optimal user experience.
+ * The `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout1 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.
  *
  * ### Keyboard Handling
  *

packages/fiori/src/themes/NavigationLayout.css

@@ -59,6 +59,6 @@
 	transform: translateX(100%);
 }
 
-::slotted([ui5-shellbar][slot="header"]) {
-	padding-inline: .5rem;
+:host([has-side-navigation]) ::slotted([ui5-shellbar][slot="header"]) {
+	padding-inline: 0.875rem 1rem;
 }