Show ActionBar ellipsis button as active if menu is open

dashboard/src/components/ActionBar.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { computed, useTemplateRef } from 'vue';
+import { computed, useTemplateRef,ref } from 'vue';
 import { Menu, Button, ButtonGroup } from '@cloudron/pankow';
 
 const props = defineProps({
@@ -14,21 +14,24 @@ const quickActions = computed(() => {
   return props.actions.filter(a => a.quickAction && !(typeof a.visible !== 'undefined' && !a.visible));
 });
 
+const isMenuOpen = ref(false);
+
 const menuElement = useTemplateRef('menuElement');
 function onMenu(event) {
+  isMenuOpen.value = true;
   menuElement.value.open(event, event.currentTarget);
 }
 
 </script>
 
 <template>
-  <div class="action-bar">
-    <Menu ref="menuElement" :model="actions" />
+  <div class="action-bar" :class="{ 'is-menu-open': isMenuOpen }">
+    <Menu ref="menuElement" :model="actions" @close="isMenuOpen = false" />
     <ButtonGroup class="quick-action-group">
       <Button tool secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" :href="quickAction.href || null" :target="quickAction.target || null" v-tooltip.top="quickAction.label"/>
       <Button tool secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length"/>
     </ButtonGroup>
-    <Button tool plain secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length" class="menu-action" />
+    <Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0 && actions.length !== quickActions.length" class="menu-action" />
   </div>
 </template>