fix(ui5-side-navigation): add padding at the end of the text (#11890)

Issue: When the text spans the full length of the item, for example,
when it is truncated, there was no padding at the end.

Solution: Added padding at the end of the text.

Author: LidiyaGeorgieva

packages/fiori/src/SideNavigationItem.ts

@@ -175,7 +175,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	get classesArray() {
 		const classes = super.classesArray;
 
-		if (!this.effectiveDisabled && this.sideNavigation?.collapsed && this.items.length) {
+		if (!this.effectiveDisabled && this.items.length) {
 			classes.push("ui5-sn-item-with-expander");
 		}
 

packages/fiori/src/themes/SideNavigationItem.css

@@ -16,7 +16,7 @@
 }
 
 :host([in-popover]) .ui5-sn-item-level1 .ui5-sn-item-text {
-	margin: 0 1rem 0 0;
+	margin: 0 0.375rem 0 0;
 	line-height: var(--_ui5_side_navigation_popup_title_line_height);
 }
 

packages/fiori/src/themes/SideNavigationItemBase.css

@@ -339,7 +339,11 @@ and there is an additional border that appears on hover. */
 	white-space: nowrap;
 }
 
-.ui5-sn-item-with-expander .ui5-sn-item-icon::after {
+:host(:not([side-nav-collapsed])) .ui5-sn-item:not(.ui5-sn-item-group):not(.ui5-sn-item-with-expander) .ui5-sn-item-text {
+	padding-inline-end: 0.375rem;
+}
+
+:host([side-nav-collapsed]) .ui5-sn-item-with-expander .ui5-sn-item-icon::after {
 	display: var(--_ui5_side_navigation_triangle_display);
 	content: "";
 	width: 0;

packages/fiori/test/pages/SideNavigationWithGroups.html

@@ -15,7 +15,7 @@
 								  tooltip="Home tooltip"></ui5-side-navigation-item>
 		<ui5-side-navigation-group id="group1" expanded text="Group" tooltip="Group tooltip">
 			<!-- Items -->
-			<ui5-side-navigation-item text="Home 1"
+			<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
 									  icon="home"
 									  href="#home"
 									  tooltip="Home 1 tooltip"></ui5-side-navigation-item>
@@ -34,7 +34,7 @@
 			<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
 		</ui5-side-navigation-item>
 		<ui5-side-navigation-item href="#locations" text="Locations 2" icon="locate-me"></ui5-side-navigation-item>
-		<ui5-side-navigation-group expanded text="Group 2">
+		<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit">
 			<!-- Items -->
 			<ui5-side-navigation-item text="Home 1"
 									  icon="home"