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

keep sidebar groups expanded

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-09-25 10:53:49 +02:00
parent 7948e04ca7
commit 35db862d12
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/Index.vue
+23 -18
View File
@@ -123,9 +123,15 @@ function onSidebarClose() {
}
const activeSidebarItem = ref('');
const activeSidebarGroup = ref('');
const activeSidebarGroups = ref({
'backup': false,
'email': false,
'system': false,
'user-directory': false,
'users': false
});
function onToggleGroup(group) {
activeSidebarGroup.value = activeSidebarGroup.value === group ? '' : group;
activeSidebarGroups.value[group] = !activeSidebarGroups.value[group];
}
function onHashChange() {
@@ -133,12 +139,11 @@ function onHashChange() {
activeSidebarItem.value = v;
if (activeSidebarItem.value.indexOf('backup') === 0) activeSidebarGroup.value = 'backup';
else if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
else if (activeSidebarItem.value.indexOf('system') === 0) activeSidebarGroup.value = 'system';
else if (activeSidebarItem.value.indexOf('user-directory') === 0) activeSidebarGroup.value = 'user-directory';
else if (activeSidebarItem.value.indexOf('users') === 0) activeSidebarGroup.value = 'users';
else activeSidebarGroup.value = '';
if (activeSidebarItem.value.indexOf('backup') === 0) activeSidebarGroups.value['backup'] = true;
else if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroups.value['email'] = true;
else if (activeSidebarItem.value.indexOf('system') === 0) activeSidebarGroups.value['system'] = true;
else if (activeSidebarItem.value.indexOf('user-directory') === 0) activeSidebarGroups.value['user-directory'] = true;
else if (activeSidebarItem.value.indexOf('users') === 0) activeSidebarGroups.value['users'] = true;
if (v === VIEWS.APPS) {
view.value = VIEWS.APPS;
@@ -283,9 +288,9 @@ onMounted(async () => {
<hr/>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'appearance' }" v-show="profile.isAtLeastAdmin" href="#/appearance" @click="onSidebarClose()"><i class="fa fa-pen-ruler fa-fw"></i> {{ $t('appearance.title') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('backup')"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'backup' }" style="margin-left: 6px;"></i></div>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('backup')"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups['backup'] }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'backup'">
<div class="sidebar-item-group" v-if="activeSidebarGroups['backup']">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backup-sites' }" href="#/backup-sites" @click="onSidebarClose()"><i class="fa fa-fw fa-hard-drive"></i> {{ $t('backups.sites.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backup-list' }" href="#/backup-list" @click="onSidebarClose()"><i class="fa fa-fw fa-list-check"></i> {{ $t('backups.listing.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'backup-app-archive' }" href="#/backup-app-archive" @click="onSidebarClose()"><i class="fa fa-fw fa-grip"></i> {{ $t('backups.archives.title') }}</a>
@@ -294,9 +299,9 @@ onMounted(async () => {
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'domains' }" v-show="profile.isAtLeastAdmin" href="#/domains" @click="onSidebarClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'email' }" style="margin-left: 6px;"></i></div>
<div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups['email'] }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
<div class="sidebar-item-group" v-if="activeSidebarGroups['email']">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-domains' }" href="#/email-domains" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailboxes' }" href="#/email-mailboxes" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'email-mailinglists' }" href="#/email-mailinglists" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
@@ -309,9 +314,9 @@ onMounted(async () => {
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('system')"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'system' }" style="margin-left: 6px;"></i></div>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('system')"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups['system'] }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'system'">
<div class="sidebar-item-group" v-if="activeSidebarGroups['system']">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-docker' }" href="#/system-docker" @click="onSidebarClose()"><i class="fa-brands fa-fw fa-docker"></i> {{ $t('dockerRegistries.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-eventlog' }" href="#/system-eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'system-locale' }" href="#/system-locale" @click="onSidebarClose()"><i class="fa fa-fw fa-language"></i> {{ $t('system.locale.title') }}</a>
@@ -319,17 +324,17 @@ onMounted(async () => {
</div>
</Transition>
<div class="sidebar-item" v-show="profile.isAtLeastUserManager" @click="onToggleGroup('users')"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'users' }" style="margin-left: 6px;"></i></div>
<div class="sidebar-item" v-show="profile.isAtLeastUserManager" @click="onToggleGroup('users')"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups['users'] }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'users'">
<div class="sidebar-item-group" v-if="activeSidebarGroups['users']">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-user fa-fw"></i> {{ $t('main.navbar.users') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'users-groups' }" v-show="profile.isAtLeastUserManager" href="#/users-groups" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.groups') }}</a>
</div>
</Transition>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-address-book fa-fw"></i> {{ $t('userDirectory.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroup === 'user-directory' }" style="margin-left: 6px;"></i></div>
<div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup('user-directory')"><i class="fa fa-address-book fa-fw"></i> {{ $t('userDirectory.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups['user-directory'] }" style="margin-left: 6px;"></i></div>
<Transition name="sidebar-item-group-animation">
<div class="sidebar-item-group" v-if="activeSidebarGroup === 'user-directory'">
<div class="sidebar-item-group" v-if="activeSidebarGroups['user-directory']">
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-ldap-server' }" href="#/user-directory-ldap-server" @click="onSidebarClose()"><i class="fa fa-fw fa-users-rays"></i> {{ $t('users.exposedLdap.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-openid-provider' }" href="#/user-directory-openid-provider" @click="onSidebarClose()"><i class="fa fa-fw fa-brands fa-openid"></i> {{ $t('oidc.title') }}</a>
<a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory-settings' }" href="#/user-directory-settings" @click="onSidebarClose()"><i class="fa fa-fw fa-cog"></i> {{ $t('userdirectory.settings.title') }}</a>