show menu when avatar is clicked

dashboard/src/components/Headerbar.vue

@@ -7,10 +7,11 @@ const t = i18n.t;
 import { onMounted, onUnmounted, ref, useTemplateRef, inject } from 'vue';
 import { marked } from 'marked';
 import { eachLimit } from 'async';
-import { Button, Popover, Icon, InputDialog, Spinner } from '@cloudron/pankow';
+import { Menu, Button, Popover, Icon, InputDialog, Spinner } from '@cloudron/pankow';
 import { prettyDate, prettyLongDate } from '@cloudron/pankow/utils';
 import NotificationsModel from '../models/NotificationsModel.js';
 import ServicesModel from '../models/ServicesModel.js';
+import ProfileModel from '../models/ProfileModel.js';
 
 defineProps(['config', 'subscription']);
 
@@ -24,6 +25,7 @@ function onOpenHelp(popover, event, elem) {
 }
 
 const servicesModel = ServicesModel.create();
+const profileModel = ProfileModel.create();
 
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
@@ -114,6 +116,23 @@ const description = marked.parse(t('support.help.description', {
   apiLink: 'https://docs.cloudron.io/api.html'
 }));
 
+const avatarActions = [{//
+    icon: 'fa-solid fa-circle-user',
+    label: t('profile.title'),
+    action: () => { window.location.href = '#/profile'; }
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-right-from-bracket',
+    label: t('main.logout'),
+    action: () => { profileModel.logout(); }
+  }];
+
+const avatarMenu = useTemplateRef('avatarMenu');
+function onAvatarClick(event) {
+  avatarMenu.value.open(event, event.currentTarget);
+}
+
 onMounted(async () => {
   if (profile.value.isAtLeastAdmin) await refresh();
 
@@ -129,6 +148,8 @@ onUnmounted(() => {
 <template>
   <div class="headerbar">
     <InputDialog ref="inputDialog"/>
+    <Menu ref="avatarMenu" :model="avatarActions" />
+
     <Popover ref="notificationPopover" :width="'min(80%, 400px)'" :height="'min(80%, 600px)'">
       <div style="padding: 10px; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
         <div v-if="notifications.length" style="overflow: auto; margin-bottom: 10px">
@@ -181,7 +202,7 @@ onUnmounted(() => {
     <div class="headerbar-action" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
     <div class="headerbar-action pankow-no-mobile" v-if="profile.isAtLeastAdmin" ref="helpButton" @click="onOpenHelp(helpPopover, $event, helpButton)"><Icon icon="fa fa-question"/></div>
     <!-- <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a> -->
-    <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" @error="event => event.target.src = '/img/avatar-default-symbolic.svg'"/> {{ profile.username }}</a>
+    <a class="headerbar-action" @click.capture="onAvatarClick($event)"><img :src="profile.avatarUrl" @error="event => event.target.src = '/img/avatar-default-symbolic.svg'"/> {{ profile.username }}</a>
   </div>
 </template>
 

dashboard/src/views/ProfileView.vue

@@ -209,10 +209,6 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('profile.title')">
-      <template #header-buttons>
-        <Button secondary @click="profileModel.logout()">{{ $t('main.logout') }}</Button>
-      </template>
-
       <div style="display: flex; flex-wrap: wrap; gap: 20px">
         <div style="width: 128px;">
           <ImagePicker mode="editable" :src="profile.avatarUrl" fallback-src="/img/avatar-default-symbolic.svg" :disabled="config.profileLocked" :size="512" :unset-handler="onAvatarUnset" :save-handler="onAvatarSubmit" display-width="128px"/>