UI: improve navigation (#14141)

assets/css/app.css

@@ -49,6 +49,7 @@
 	--evcc-default-text: var(--bs-gray-dark);
 	--evcc-gray: var(--bs-gray-medium);
 	--evcc-gray-50: #93949e80;
+	--evcc-gray-25: #93949e40;
 
 	--evcc-accent1: var(--evcc-dark-yellow);
 	--evcc-accent2: var(--evcc-darker-green);
@@ -392,9 +393,10 @@ small {
 .dropdown-item {
 	color: var(--evcc-default-text);
 }
-.dropdown-item:active {
-	background-color: var(--bs-primary);
-	color: var(--bs-white);
+.dropdown-item:active,
+.dropdown-item.active {
+	background-color: var(--evcc-gray-25);
+	color: var(--evcc-default-text);
 }
 .form-select {
 	overflow: hidden;

assets/js/components/Notifications.vue

@@ -5,7 +5,7 @@
 			href="#"
 			data-bs-toggle="modal"
 			data-bs-target="#notificationModal"
-			class="btn btn-sm btn-link text-decoration-none link-light text-nowrap"
+			class="btn btn-sm btn-link text-decoration-none link-light border-0 text-nowrap"
 			data-testid="notification-icon"
 		>
 			<shopicon-regular-exclamationtriangle
@@ -74,7 +74,7 @@
 							type="button"
 							data-bs-dismiss="modal"
 							aria-label="Close"
-							class="btn btn-outline-primary"
+							class="btn btn-secondary"
 							@click="clear"
 						>
 							{{ $t("notifications.dismissAll") }}

assets/js/components/TopNavigation.vue

@@ -22,7 +22,7 @@
 			data-testid="topnavigation-dropdown"
 		>
 			<li>
-				<router-link class="dropdown-item" to="/sessions">
+				<router-link class="dropdown-item" to="/sessions" active-class="active">
 					{{ $t("header.sessions") }}
 				</router-link>
 			</li>
@@ -52,17 +52,16 @@
 				</button>
 			</li>
 			<li>
-				<router-link class="dropdown-item" to="/config">
+				<router-link class="dropdown-item" to="/config" active-class="active">
 					{{ $t("config.main.title") }}
 				</router-link>
 			</li>
-			<li><hr class="dropdown-divider" /></li>
-
-			<li v-if="showLogout">
-				<button type="button" class="dropdown-item" @click="logout">
-					{{ $t("header.logout") }}
-				</button>
+			<li>
+				<router-link class="dropdown-item" to="/log" active-class="active">
+					{{ $t("log.title") }}
+				</router-link>
 			</li>
+			<li><hr class="dropdown-divider" /></li>
 			<template v-if="providerLogins.length > 0">
 				<li><hr class="dropdown-divider" /></li>
 				<li>
@@ -102,6 +101,11 @@
 					{{ $t("header.nativeSettings") }}
 				</button>
 			</li>
+			<li v-if="showLogout">
+				<button type="button" class="dropdown-item" @click="logout">
+					{{ $t("header.logout") }}
+				</button>
+			</li>
 		</ul>
 	</div>
 </template>