UX: Improve menu bar (THM-Health#2575)

* Fix uneven height of right menu bar entries, add tooltips, replace sun icon to make it easier to recognoise

* Fix cs

* Update changelog

* Cleanup, fix tests

* Code cleanup

* Code cleanup

* Code cleanup, fix icon size

* Fix tests

Author: samuelwei

CHANGELOG.md

@@ -10,6 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Storage space to metrics ([#2345], [#2604])
+- Tooltips for icon-only menu bar items ([#2575])
+
+### Changed
+
+- Sun & moon icon in the menu bar ([#2575])
+
+### Fixed
+
+- Uneven height of right menu bar items ([#2575])
 
 ## [v4.8.0] - 2025-10-27
 
@@ -590,6 +599,7 @@ You can find the changelog for older versions there [here](https://github.com/TH
 [#2551]: https://github.com/THM-Health/PILOS/pull/2551
 [#2553]: https://github.com/THM-Health/PILOS/pull/2553
 [#2554]: https://github.com/THM-Health/PILOS/issues/2554
+[#2575]: https://github.com/THM-Health/PILOS/pull/2575
 [#2604]: https://github.com/THM-Health/PILOS/pull/2604
 [unreleased]: https://github.com/THM-Health/PILOS/compare/v4.8.0...develop
 [v3.0.0]: https://github.com/THM-Health/PILOS/releases/tag/v3.0.0

resources/css/app/_navigation.css

@@ -2,3 +2,9 @@
     justify-content: space-between;
     width: 100%;
 }
+
+.user-avatar {
+    .p-menubar-item-link {
+        @apply py-1;
+    }
+}

resources/js/components/MainNav.vue

@@ -107,6 +107,7 @@
           </router-link>
           <a
             v-else
+            v-tooltip.bottom="item.tooltip"
             :href="item.url"
             :target="item.target"
             v-bind="props.action"
@@ -278,8 +279,9 @@ const userMenuItems = computed(() => {
 
   if (settingsStore.getSetting("general.help_url")) {
     items.push({
-      icon: "fa-solid fa-circle-question text-xl",
+      icon: "fa-solid fa-circle-question text-2xl",
       label: t("app.help"),
+      tooltip: t("app.help"),
       target: "_blank",
       dataTest: "navbar-help",
       url: settingsStore.getSetting("general.help_url"),
@@ -298,8 +300,9 @@ const userMenuItems = computed(() => {
   // Only show the locale menu if more than one locale is enabled
   if (locales.value.length > 1) {
     const localeItem = {
-      icon: "fa-solid fa-language text-xl",
+      icon: "fa-solid fa-language text-2xl",
       label: t("app.change_locale"),
+      tooltip: t("app.change_locale"),
       dataTest: "navbar-locale",
       items: [],
     };

resources/js/components/MainNavDarkModeToggle.vue

@@ -3,14 +3,52 @@ import { useDark } from "@vueuse/core";
 const isDark = useDark();
 </script>
 <template>
-  <div class="relative h-[1em] w-[1.25em] text-xl">
-    <Transition name="dark">
-      <i v-if="isDark" class="fa-solid fa-moon absolute w-full text-center" />
-    </Transition>
-    <Transition name="light">
-      <i v-if="!isDark" class="fa-solid fa-sun absolute w-full text-center" />
-    </Transition>
+  <div class="flex items-center">
+    <div class="relative h-[1.5em] w-[1.5em]">
+      <Transition name="dark">
+        <svg
+          v-if="isDark"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="absolute"
+          aria-hidden="true"
+          data-test="navbar-dark-mode-enabled-icon"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </Transition>
+      <Transition name="light">
+        <svg
+          v-if="!isDark"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          class="absolute"
+          aria-hidden="true"
+          data-test="navbar-dark-mode-disabled-icon"
+        >
+          <path
+            d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z"
+          />
+        </svg>
+      </Transition>
+    </div>
   </div>
+  <div
+    v-if="isDark"
+    v-tooltip.bottom="$t('app.dark_mode_disable')"
+    class="absolute inset-0 h-full w-full"
+  />
+  <div
+    v-else
+    v-tooltip.bottom="$t('app.dark_mode_enable')"
+    class="absolute inset-0 h-full w-full"
+  />
 </template>
 <style scoped>
 .light-enter-active,

tests/Frontend/e2e/GeneralApplication.cy.js

@@ -242,25 +242,25 @@ describe("General", function () {
     // Check if light mode is enabled by default
     cy.get("html").should("not.have.class", "dark");
     cy.get('[data-test="navbar-dark-mode"]')
-      .find("i")
-      .should("have.class", "fa-sun");
+      .find("svg")
+      .should("have.attr", "data-test", "navbar-dark-mode-disabled-icon");
 
     // Toggle dark mode
     cy.get('[data-test="navbar-dark-mode"]').click();
 
     // Check if dark mode is enabled
     cy.get("html").should("have.class", "dark");
     cy.get('[data-test="navbar-dark-mode"]')
-      .find("i")
-      .should("have.class", "fa-moon");
+      .find("svg")
+      .should("have.attr", "data-test", "navbar-dark-mode-enabled-icon");
 
     // Toggle dark mode again
     cy.get('[data-test="navbar-dark-mode"]').click();
 
     // Check if light mode is enabled again
     cy.get("html").should("not.have.class", "dark");
     cy.get('[data-test="navbar-dark-mode"]')
-      .find("i")
-      .should("have.class", "fa-sun");
+      .find("svg")
+      .should("have.attr", "data-test", "navbar-dark-mode-disabled-icon");
   });
 });