fix: also use wrap for navigation-items that are no buttons (#4099)

* fix: also use wrap for navigation-items that are no buttons
* fix: show caret on the right of navigation-item

Author: michaelmkraus

__snapshots__/navigation/component/chromium/DBNavigation-should-match-screenshot-for-device-mobile.png

@@ -62,6 +62,7 @@
 	white-space: nowrap; // we don't want to break
 	text-align: center;
 	align-items: center; // Centering the content vertically and horizontally
+	justify-content: space-between;
 
 	@include helpers.hover {
 		background-color: colors.$db-adaptive-bg-basic-transparent-hovered;
@@ -88,11 +89,9 @@
 	inline-size: auto;
 
 	&[data-wrap="true"] {
-		.db-navigation-item-expand-button {
-			&:is(button) {
-				white-space: normal;
-				text-align: start;
-			}
+		:is(a, .db-navigation-item-expand-button):first-of-type {
+			white-space: normal;
+			text-align: start;
 		}
 	}
 

__snapshots__/navigation/component/chromium/DBNavigation-should-match-screenshot-for-device-tablet.png

@@ -36,23 +36,25 @@
 							[showIcon]="exampleProps?.showIcon"
 						>
 							<ng-container *dbNavigationContent>
-								<a href="#">Test1</a>
+								Also a navigation item with longer label
 							</ng-container>
-						</db-navigation-item>
-						<db-navigation-item
-							[icon]="exampleProps?.icon"
-							[showIcon]="exampleProps?.showIcon"
-						>
-							<ng-container *dbNavigationContent>
-								<a href="#">Test2</a>
+							<ng-container sub-navigation>
+								<db-navigation-item
+									[icon]="exampleProps?.icon"
+									[showIcon]="exampleProps?.showIcon"
+								>
+									<ng-container *dbNavigationContent>
+										<a href="#">Navigation-Item 2</a>
+									</ng-container>
+								</db-navigation-item>
 							</ng-container>
 						</db-navigation-item>
 						<db-navigation-item
 							[icon]="exampleProps?.icon"
 							[showIcon]="exampleProps?.showIcon"
 						>
 							<ng-container *dbNavigationContent>
-								<a href="#">Test3</a>
+								<a href="#">Navigation-Item 1</a>
 							</ng-container>
 						</db-navigation-item>
 					</ng-container>

__snapshots__/navigation/component/firefox/DBNavigation-should-match-screenshot-for-device-mobile.png

@@ -30,11 +30,22 @@ const getNavigationItem = ({
 			subNavigation={
 				areaPopup && (
 					<>
-						<DBNavigationItem icon={icon} showIcon={showIcon}>
-							<a href="#">Test1</a>
+						<DBNavigationItem
+							icon={icon}
+							showIcon={showIcon}
+							subNavigation={
+								<>
+									<DBNavigationItem
+										icon={icon}
+										showIcon={showIcon}>
+										<a href="#">Navigation-Item 2</a>
+									</DBNavigationItem>
+								</>
+							}>
+							Also a navigation item with longer label
 						</DBNavigationItem>
 						<DBNavigationItem icon={icon} showIcon={showIcon}>
-							<a href="#">Test2</a>
+							<a href="#">Navigation-Item 1</a>
 						</DBNavigationItem>
 					</>
 				)

__snapshots__/navigation/component/firefox/DBNavigation-should-match-screenshot-for-device-tablet.png

@@ -269,12 +269,10 @@
 					{
 						"name": "a",
 						"native": true,
+						"content": "Sub-Sub-Navi-Item 1",
 						"props": {
-							"href": "#",
-							"icon": "x_placeholder",
-							"showIcon": true
-						},
-						"content": "True"
+							"href": "#"
+						}
 					}
 				]
 			},

__snapshots__/navigation/component/mobile-chrome/DBNavigation-should-match-screenshot-for-device-mobile.png

@@ -32,17 +32,21 @@ const log = (exampleName?: string) => {
 						<DBNavigationItem
 							:icon="exampleProps?.icon"
 							:showIcon="exampleProps?.showIcon"
-							><a href="#">Test1</a></DBNavigationItem
 						>
+							Also a navigation item with longer label
+							<template v-slot:sub-navigation>
+								<DBNavigationItem
+									:icon="exampleProps?.icon"
+									:showIcon="exampleProps?.showIcon"
+								>
+									<a href="#">Navigation Item 2</a>
+								</DBNavigationItem>
+							</template>
+						</DBNavigationItem>
 						<DBNavigationItem
 							:icon="exampleProps?.icon"
 							:showIcon="exampleProps?.showIcon"
-							><a href="#">Test2</a></DBNavigationItem
-						>
-						<DBNavigationItem
-							:icon="exampleProps?.icon"
-							:showIcon="exampleProps?.showIcon"
-							><a href="#">Test3</a></DBNavigationItem
+							><a href="#">Navigation Item 1</a></DBNavigationItem
 						>
 					</template>
 					<template v-if="exampleProps?.areaPopup">