frontend: use pankow Menu in filemanger

frontend/src/views/Home.vue

@@ -55,9 +55,9 @@
         </template>
         <template #right>
           <Button icon="fa-solid fa-plus" @click="onCreateMenu" style="margin-right: 5px">{{ $t('filemanager.toolbar.new') }}</Button>
-          <Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" />
+          <Menu ref="createMenu" :model="createMenuModel"/>
           <Button icon="fa-solid fa-upload" @click="onUploadMenu" style="margin-right: 5px">{{ $t('filemanager.toolbar.upload') }}</Button>
-          <Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" />
+          <Menu ref="uploadMenu" :model="uploadMenuModel"/>
 
           <Button style="margin-left: 20px; margin-right: 5px;" :title="$t('filemanager.toolbar.restartApp')" secondary :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp" v-show="resourceType === 'app'"/>
           <Button style="margin-right: 5px;" :href="'/frontend/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
@@ -125,11 +125,10 @@ import { marked } from 'marked';
 
 import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
-import Menu from 'primevue/menu';
 
 import { useConfirm } from 'primevue/useconfirm';
 
-import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, MainLayout, FileUploader, Spinner } from 'pankow';
+import { DirectoryView, TopBar, Breadcrumb, BottomBar, Button, MainLayout, Menu, FileUploader, Spinner } from 'pankow';
 import Icon from 'pankow/components/Icon.vue';
 import { sanitize, sleep } from 'pankow/utils';
 
@@ -209,22 +208,22 @@ export default {
       ownersModel: [],
       // contextMenuModel will have activeItem attached if any command() is called
       createMenuModel: [{
-        label: () => this.$t('filemanager.toolbar.newFile'),
+        label: this.$t('filemanager.toolbar.newFile'),
         icon: 'pi pi-file',
-        command: this.onNewFile
+        action: this.onNewFile
       }, {
-        label: () => this.$t('filemanager.toolbar.newFolder'),
+        label: this.$t('filemanager.toolbar.newFolder'),
         icon: 'pi pi-folder',
-        command: this.onNewFolder
+        action: this.onNewFolder
       }],
       uploadMenuModel: [{
-        label: () => this.$t('filemanager.toolbar.uploadFile'),
+        label: this.$t('filemanager.toolbar.uploadFile'),
         icon: 'pi pi-file',
-        command: this.onUploadFile
+        action: this.onUploadFile
       }, {
-        label: () => this.$t('filemanager.toolbar.newFolder'),
+        label: this.$t('filemanager.toolbar.newFolder'),
         icon: 'pi pi-folder',
-        command: this.onUploadFolder
+        action: this.onUploadFolder
       }]
     };
   },
@@ -252,11 +251,11 @@ export default {
     }
   },
   methods: {
-    onCreateMenu(event) {
-      this.$refs.createMenu.toggle(event);
+    onCreateMenu(event, elem = null) {
+      this.$refs.createMenu.open(event, elem);
     },
-    onUploadMenu(event) {
-      this.$refs.uploadMenu.toggle(event);
+    onUploadMenu(event, elem = null) {
+      this.$refs.uploadMenu.open(event, elem);
     },
     onCancelUpload() {
       if (!this.uploadRequest) return;