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

Provide a globally injected isMobile state for reactivity

Browse Source
This commit is contained in:
Johannes Zellner
2025-12-17 16:44:01 +01:00
parent 16e79c6546
commit b90cdb8686
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/SideBarItem.vue
+10 -8
View File
@@ -1,8 +1,10 @@
<script setup>
import { ref, computed, useTemplateRef, watch } from 'vue';
import { ref, computed, useTemplateRef, watch, inject } from 'vue';
import SideBarItem from './SideBarItem.vue';
const isMobile = inject('isMobile');
const emit = defineEmits(['close']);
const props = defineProps({
@@ -37,11 +39,11 @@ const props = defineProps({
}
});
const isExpanded = ref(false);
const isMenuExpanded = ref(false);
const isMenuOpen = ref(false);
watch(() => props.collapsed, () => {
isExpanded.value = false;
isMenuExpanded.value = false;
isMenuOpen.value = false;
});
@@ -100,7 +102,7 @@ function getHiddenElementSize(element) {
const subMenuFlipped = ref(false);
function toggleMenu() {
if (props.collapsed && window.innerWidth >= 576) {
if (props.collapsed && !isMobile.value) {
const size = getHiddenElementSize(subMenuElement.value);
const viewport = getViewport();
@@ -124,7 +126,7 @@ function toggleMenu() {
isMenuOpen.value = true;
} else {
isExpanded.value = !isExpanded.value;
isMenuExpanded.value = !isMenuExpanded.value;
}
}
@@ -138,8 +140,8 @@ function onBackdrop(event) {
<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()" v-tooltip.right="collapsed ? label : null"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }}</span></a>
<div v-else-if="childItems.length" ref="elem" class="sidebar-item" :class="{ 'sidebar-item-menu-open': isMenuOpen ? '#e9ecef' : null }" @click="toggleMenu()" v-tooltip.right="collapsed ? label : null"><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>
<a v-else-if="!childItems?.length" class="sidebar-item" :class="{ active: isActive }" :href="route" @click="close()" v-tooltip.right="collapsed && !isMobile ? label : null"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }}</span></a>
<div v-else-if="childItems.length" ref="elem" class="sidebar-item" :class="{ 'sidebar-item-menu-open': isMenuOpen ? '#e9ecef' : null }" @click="toggleMenu()" v-tooltip.right="collapsed && !isMobile ? label : null"><i :class="icon"></i> <span :class="{ 'sidebar-item-label-collapsed': collapsed }">{{ label }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: isMenuExpanded }" style="margin-left: 6px;"></i></span></div>
<teleport to="#app">
<div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isMenuOpen"></div>
@@ -155,7 +157,7 @@ function onBackdrop(event) {
</teleport>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="isExpanded">
<div class="sidebar-item-group" v-if="isMenuExpanded">
<SideBarItem v-for="item in childItems" :key="item"
:label="item.label"
:icon="item.icon"