Improve on the quick action bar

dashboard/src/components/ActionBar.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { computed, useTemplateRef } from 'vue';
-import { Menu, Button } from '@cloudron/pankow';
+import { Menu, Button, ButtonGroup } from '@cloudron/pankow';
 
 const props = defineProps({
   actions: {
@@ -23,9 +23,12 @@ function onMenu(event) {
 
 <template>
   <div class="action-bar">
-    <Button tool plain secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()" class="quick-action"/>
     <Menu ref="menuElement" :model="actions" />
-    <Button tool plain secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0" />
+    <ButtonGroup class="quick-action-group">
+      <Button tool secondary v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action()"/>
+      <Button tool secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0"/>
+    </ButtonGroup>
+    <Button tool plain secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="actions.length > 0" class="menu-action" />
   </div>
 </template>
 
@@ -38,12 +41,21 @@ function onMenu(event) {
   min-height: 30.5px;
 }
 
-.quick-action {
-  display: none;
-}
-
-tr:hover .quick-action {
+.menu-action {
   display: block;
 }
 
+tr:hover .menu-action {
+  display: none;
+}
+
+.quick-action-group {
+  display: none;
+}
+
+tr:hover .quick-action-group {
+  display: block;
+}
+
+
 </style>