jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix main menu on mobile

Browse Source
This commit is contained in:
Johannes Zellner
2025-12-16 12:26:52 +01:00
parent 5cb2312806
commit 6b7e8bef1d
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SideBar.vue
+1 -1
View File
@@ -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>
dashboard/src/components/SideBarItem.vue
+14 -3
View File
@@ -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;