chore: fix user menu

Author: SteKoe

spring-boot-admin-samples/spring-boot-admin-sample-custom-ui/src/index.js

@@ -15,76 +15,77 @@
  */
 
 /* global SBA */
-import custom from './custom.vue';
-import customSubitem from './custom-subitem.vue';
-import customEndpoint from './custom-endpoint.vue';
+import customEndpoint from "./custom-endpoint.vue";
+import customSubitem from "./custom-subitem.vue";
+import custom from "./custom.vue";
 
 // tag::customization-ui-toplevel[]
 SBA.use({
-  install({viewRegistry}) {
+  install({ viewRegistry }) {
     viewRegistry.addView({
-      name: 'custom',  //<1>
-      path: '/custom', //<2>
+      name: "custom", //<1>
+      path: "/custom", //<2>
       component: custom, //<3>
-      label: 'Custom', //<4>
+      label: "Custom", //<4>
       order: 1000, //<5>
     });
-  }
+  },
 });
 // end::customization-ui-toplevel[]
 
 // tag::customization-ui-child[]
 SBA.use({
-  install({viewRegistry}) {
+  install({ viewRegistry }) {
     viewRegistry.addView({
-      name: 'customSub',
-      parent: 'custom', // <1>
-      path: '/customSub', // <2>
+      name: "customSub",
+      parent: "custom", // <1>
+      path: "/customSub", // <2>
       isChildRoute: false, // <3>
       component: customSubitem,
-      label: 'Custom Sub',
+      label: "Custom Sub",
       order: 1000,
     });
-  }
+  },
 });
 // end::customization-ui-child[]
 
 SBA.use({
-  install({viewRegistry}) {
+  install({ viewRegistry }) {
     viewRegistry.addView({
-      name: 'customSubUser',
-      parent: 'user', // <1>
-      path: '/customSub', // <2>
+      name: "customSubUser",
+      parent: "user", // <1>
+      path: "/customSub", // <2>
       isChildRoute: false, // <3>
       component: customSubitem,
-      label: 'Custom Sub',
+      label: "Custom Sub In Usermenu",
       order: 1000,
     });
-  }
+  },
 });
 
 // tag::customization-ui-endpoint[]
 SBA.use({
-  install({viewRegistry}) {
+  install({ viewRegistry }) {
     viewRegistry.addView({
-      name: 'instances/custom',
-      parent: 'instances', // <1>
-      path: 'custom',
+      name: "instances/custom",
+      parent: "instances", // <1>
+      path: "custom",
       component: customEndpoint,
-      label: 'Custom',
-      group: 'custom', // <2>
+      label: "Custom",
+      group: "custom", // <2>
       order: 1000,
-      isEnabled: ({instance}) => instance.hasEndpoint('custom') // <3>
+      isEnabled: ({ instance }) => instance.hasEndpoint("custom"), // <3>
     });
   },
-  configure({i18n}) {
-    i18n.mergeLocaleMessage('en', { // <4>
+  configure({ i18n }) {
+    i18n.mergeLocaleMessage("en", {
+      // <4>
       sidebar: {
-        custom : {
-          title : "My Custom Extensions"
-        }
-      }
+        custom: {
+          title: "My Custom Extensions",
+        },
+      },
     });
-  }
+  },
 });
 // end::customization-ui-endpoint[]

spring-boot-admin-server-ui/src/main/frontend/shell/NavbarUserMenu.vue

@@ -1,45 +1,36 @@
 <template>
-  <NavbarMenu :menu-items="['']">
-    <template #default>
-      <div class="px-0.5 py-0.5">
-        <span class="sr-only"> Open user menu</span>
-        <font-awesome-icon
-          color="white"
-          class="rounded-full"
-          icon="user-circle"
-          size="2x"
+  <div class="link-wrapper">
+    <div class="link" v-text="userName"></div>
+    <NavbarMenu>
+      <template #menuItems>
+        <div v-if="userName" class="link link--no-hover">
+          <span>
+            {{ $t('navbar.signedInAs') }} <strong v-text="userName" />
+          </span>
+        </div>
+        <hr class="pb-1" />
+        <NavbarLink
+          v-for="userSubMenuItem in submenuItems"
+          :key="userSubMenuItem.name"
+          :view="userSubMenuItem"
         />
-      </div>
-    </template>
 
-    <template #menuItems>
-      <div v-if="userName" class="link link--no-hover">
-        <span>
-          {{ $t('navbar.signedInAs') }} <strong v-text="userName" />
-        </span>
-      </div>
-
-      <NavbarLink
-        v-for="userSubMenuItem in submenuItems"
-        :key="userSubMenuItem.name"
-        :view="userSubMenuItem"
-      />
-
-      <form action="logout" method="post">
-        <input
-          v-if="csrfToken"
-          type="hidden"
-          :name="csrfParameterName"
-          :value="csrfToken"
-        />
-        <button type="submit" value="logout" class="link">
-          <font-awesome-icon icon="sign-out-alt" />&nbsp;<span
-            v-text="$t('navbar.logout')"
+        <form action="logout" method="post">
+          <input
+            v-if="csrfToken"
+            type="hidden"
+            :name="csrfParameterName"
+            :value="csrfToken"
           />
-        </button>
-      </form>
-    </template>
-  </NavbarMenu>
+          <button type="submit" value="logout" class="link">
+            <font-awesome-icon icon="sign-out-alt" />&nbsp;<span
+              v-text="$t('navbar.logout')"
+            />
+          </button>
+        </form>
+      </template>
+    </NavbarMenu>
+  </div>
 </template>
 
 <script>
@@ -48,7 +39,7 @@ import NavbarMenu from '@/shell/NavbarMenu';
 
 export default {
   name: 'NavbarUserMenu',
-  components: { NavbarMenu, NavbarLink },
+  components: { NavbarLink, NavbarMenu },
   props: {
     csrfParameterName: {
       type: String,
@@ -72,10 +63,10 @@ export default {
 
 <style scoped>
 .link {
-  @apply flex w-full items-center rounded-md px-3 py-2 text-sm hover:bg-gray-100 break-all;
+  @apply flex w-full items-center rounded-md px-3 pt-2 break-all;
 }
 
 .link--no-hover {
-  @apply hover:bg-white;
+  @apply hover:text-inherit hover:bg-inherit;
 }
 </style>

spring-boot-admin-server-ui/src/main/frontend/shell/navbar-item-language-selector.vue

@@ -15,13 +15,11 @@
   -->
 
 <template>
-  <div class="text-white">
-    <NavbarLink
-      :view="{ label: selectedLanguage.label }"
-      :subitems="languages"
-      @menu-item-clicked="localeChanged"
-    />
-  </div>
+  <NavbarLink
+    :view="{ label: selectedLanguage.label }"
+    :subitems="languages"
+    @menu-item-clicked="localeChanged"
+  />
 </template>
 
 <script>

spring-boot-admin-server-ui/src/main/frontend/shell/navbar.vue

@@ -31,7 +31,7 @@
         </div>
 
         <div class="hidden lg:block">
-          <div class="ml-4 flex items-center md:ml-6 gap-4">
+          <div class="ml-4 flex items-center md:ml-6 gap-4 text-white">
             <NavbarItemLanguageSelector
               v-if="availableLocales.length > 1"
               :current-locale="$i18n.locale"
@@ -40,7 +40,7 @@
             />
 
             <NavbarUserMenu
-              v-show="userName"
+              v-if="userName"
               :csrf-parameter-name="csrfParameterName"
               :csrf-token="csrfToken"
               :user-name="userName"