Do not rely on pankow Menu for SideBar

dashboard/src/components/SideBarItem.vue

@@ -1,7 +1,6 @@
 <script setup>
 
 import { ref, computed, useTemplateRef, watch } from 'vue';
-import { Menu } from '@cloudron/pankow';
 import SideBarItem from './SideBarItem.vue';
 
 const emit = defineEmits(['close']);
@@ -39,9 +38,11 @@ const props = defineProps({
 });
 
 const isExpanded = ref(false);
+const isMenuOpen = ref(false);
 
 watch(() => props.collapsed, () => {
   isExpanded.value = false;
+  isMenuOpen.value = false;
 });
 
 const isActive = computed(() => {
@@ -56,39 +57,45 @@ const isVisible = computed(() => {
 
 
 function close() {
+  isMenuOpen.value = false;
   emit('close');
 }
 
-const menu = useTemplateRef('menu');
+const subMenuElement = useTemplateRef('subMenuElement');
 const elem = useTemplateRef('elem');
 
-const subItems = computed(() => {
-  return props.childItems.map(i => {
-    return {
-      label: i.label,
-      icon: i.icon,
-      href: i.route,
-    };
-  });
-});
-
 function toggleMenu() {
   if (props.collapsed && window.innerWidth >= 576) {
-    menu.value.open(event, elem.value);
+    subMenuElement.value.style.left = elem.value.getBoundingClientRect().right - 5 + 'px';
+    subMenuElement.value.style.top = elem.value.getBoundingClientRect().top + 'px';
+    isMenuOpen.value = true;
   } else {
     isExpanded.value = !isExpanded.value;
   }
 }
 
+function onBackdrop(event) {
+  isMenuOpen.value = false;
+  event.preventDefault();
+}
+
 </script>
 
 <template>
   <div v-if="isVisible">
     <hr v-if="separator"/>
     <a v-else-if="!childItems?.length" class="sidebar-item" :class="{ active: isActive }" :href="route" @click="close()"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }}</span></a>
-    <div v-else-if="childItems.length" class="sidebar-item" ref="elem" @click="toggleMenu()"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: isExpanded }" style="margin-left: 6px;"></i></span></div>
+    <div v-else-if="childItems.length" ref="elem" class="sidebar-item" :class="{ 'sidebar-item-menu-open': isMenuOpen ? '#e9ecef' : null }" @click="toggleMenu()"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: isExpanded }" style="margin-left: 6px;"></i></span></div>
 
-    <Menu ref="menu" :model="subItems"></Menu>
+    <teleport to="#app">
+      <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isMenuOpen"></div>
+      <div v-show="isMenuOpen" ref="subMenuElement" class="sidebar-item-menu">
+        <div v-for="item in childItems" :key="item">
+          <hr v-if="item.separator"/>
+          <a v-else class="sidebar-item" :href="item.route" @click="close()"><i :class="item.icon"></i> {{ item.label }}</a>
+        </div>
+      </div>
+    </teleport>
 
     <Transition name="sidebar-item-group-animation">
       <div class="sidebar-item-group" v-if="isExpanded">
@@ -109,6 +116,17 @@ function toggleMenu() {
 
 <style scoped>
 
+.sidebar-item-menu {
+  position: absolute;
+  z-index: 3002; /* backdrop is at 3001 -> see pankow */
+  background-color: #e9ecef;
+  border-radius: var(--pankow-border-radius);
+}
+
+.sidebar-item-menu-open {
+  background-color: #e9ecef;
+}
+
 .sidebar-item {
   display: block;
   color: var(--pankow-text-color);
@@ -139,6 +157,11 @@ function toggleMenu() {
   .sidebar-item:hover {
     background-color: var(--card-background);
   }
+
+  .sidebar-item-menu,
+  .sidebar-item-menu-open {
+    background-color: var(--card-background);
+  }
 }
 
 .sidebar-item.active i ,