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

Support sidebar groups

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-17 02:42:45 +01:00
parent 9137244fcf
commit e83bcf0fd9
1 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
dashboard/src/components/Sidebar.vue
View File

@@ -15,8 +15,16 @@ function onClose() {
isOpen.value = false;
}
const activeGroup = ref('');
function onToggleGroup(group) {
activeGroup.value = activeGroup.value === group ? '' : group;
}
function onHashChange() {
active.value = window.location.hash.slice(2);
if (active.value.indexOf('email') === 0) activeGroup.value = 'email';
else activeGroup.value = '';
}
onMounted(() => {
@@ -45,9 +53,14 @@ onUnmounted(() => {
<a class="sidebar-item" :class="{ active: active === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'branding' }" v-show="profile.isAtLeastAdmin" href="#/branding" @click="onClose()"><i class="fa fa-passport fa-fw"></i> {{ $t('branding.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'email' }" v-show="profile.isAtLeastMailManager" href="#/email" @click="onClose()"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'emails-mailboxes' }" v-show="profile.isAtLeastMailManager" href="#/emails-mailboxes" @click="onClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'emails-mailinglists' }" v-show="profile.isAtLeastMailManager" href="#/emails-mailinglists" @click="onClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
<div class="sidebar-item actionable" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeGroup === 'email'">
<a class="sidebar-item" :class="{ active: active === 'emails-mailboxes' }" href="#/emails-mailboxes" @click="onClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'emails-mailinglists' }" href="#/emails-mailinglists" @click="onClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'email' }" href="#/email" @click="onClose()"><i class="fa fa-cog fa-fw"></i> {{ $t('emails.title') }} {{ $t('settings.title') }}</a>
</div>
</Transition>
<a class="sidebar-item" :class="{ active: active === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
<a class="sidebar-item" :class="{ active: active === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
@@ -160,4 +173,24 @@ onUnmounted(() => {
opacity: 1;
}
.sidebar-item-group {
padding-left: 20px;
height: auto;
overflow: hidden;
/* we need height to auto so we animate max-height. needs to be bigger than we need */
max-height: 300px;
}
.sidebar-item-group-animation-enter-active,
.sidebar-item-group-animation-leave-active {
transition: all 0.2s linear;
}
.sidebar-item-group-animation-leave-to,
.sidebar-item-group-animation-enter-from {
transform: translateX(-100px);
opacity: 0;
max-height: 0;
}
</style>