From 6b7e8bef1d8c48a6baf18d9c1239f5bde902e9e8 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Tue, 16 Dec 2025 12:26:52 +0100
Subject: [PATCH] Fix main menu on mobile

---
 dashboard/src/components/SideBar.vue     |  2 +-
 dashboard/src/components/SideBarItem.vue | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/components/SideBar.vue b/dashboard/src/components/SideBar.vue
index df10d372c..db8ac0203 100644
--- a/dashboard/src/components/SideBar.vue
+++ b/dashboard/src/components/SideBar.vue
@@ -68,7 +68,7 @@ onMounted(() => {
         />
       </div>
       <div style="flex-grow: 1"></div>
-      <div class="sidebar-collapse-action" @click="onToggleCollapse()"><i class="fa-solid" :class="{ 'fa-arrow-left': !isCollapsed, 'fa-arrow-right': isCollapsed }"></i> <span v-if="!isCollapsed">Collapse sidebar</span></div>
+      <div class="sidebar-collapse-action pankow-no-mobile" @click="onToggleCollapse()"><i class="fa-solid" :class="{ 'fa-arrow-left': !isCollapsed, 'fa-arrow-right': isCollapsed }"></i> <span v-if="!isCollapsed">Collapse sidebar</span></div>
     </div>
   </div>
 </template>
diff --git a/dashboard/src/components/SideBarItem.vue b/dashboard/src/components/SideBarItem.vue
index e96b3e480..e777899bd 100644
--- a/dashboard/src/components/SideBarItem.vue
+++ b/dashboard/src/components/SideBarItem.vue
@@ -68,7 +68,7 @@ const subItems = computed(() => {
 });
 
 function toggleMenu() {
-  if (props.collapsed) {
+  if (props.collapsed && window.innerWidth >= 576) {
     menu.value.open(event, elem.value);
   } else {
     isExpanded.value = !isExpanded.value;
@@ -80,8 +80,8 @@ function toggleMenu() {
 <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 v-if="!collapsed">{{ label }}</span></a>
-    <div v-else-if="childItems.length" class="sidebar-item" ref="elem" @click="toggleMenu()"><i :class="icon"></i> <span v-if="!collapsed">{{ label }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: isExpanded }" style="margin-left: 6px;"></i></span></div>
+    <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>
 
     <Menu ref="menu" :model="subItems"></Menu>
 
@@ -95,6 +95,7 @@ function toggleMenu() {
           :active="item.active"
           :separator="item.separator"
           :child-items="item.childItems"
+          @close="close()"
         />
       </div>
     </Transition>
@@ -140,6 +141,16 @@ function toggleMenu() {
   opacity: 1;
 }
 
+.sidebar-item-label-collapsed {
+  display: none;
+}
+
+@media (max-width: 576px) {
+  .sidebar-item-label-collapsed {
+    display: inline-block;
+  }
+}
+
 .sidebar-item-group {
   padding-left: 20px;
   height: auto;