From fa859a3b5de3df76206185a8c317e4358091e7f6 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 15 Dec 2025 16:58:05 +0100
Subject: [PATCH] Use custom SideBar instead of Pankow component

---
 dashboard/src/Index.vue              | 198 +-----------------
 dashboard/src/components/SideBar.vue | 302 +++++++++++++++++++++++++++
 2 files changed, 305 insertions(+), 195 deletions(-)
 create mode 100644 dashboard/src/components/SideBar.vue

diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index 5412635b2..b511cb1d2 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { onMounted, ref, useTemplateRef, provide } from 'vue';
-import { Notification, fetcher, SideBar } from '@cloudron/pankow';
+import { Notification, fetcher } from '@cloudron/pankow';
 import { setLanguage } from './i18n.js';
 import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
 import { redirectIfNeeded } from './utils.js';
@@ -13,6 +13,7 @@ import Headerbar from './components/Headerbar.vue';
 import SubscriptionRequiredDialog from './components/SubscriptionRequiredDialog.vue';
 import RequestErrorDialog from './components/RequestErrorDialog.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
+import SideBar from './components/SideBar.vue';
 import AppsView from './views/AppsView.vue';
 import AppConfigureView from './views/AppConfigureView.vue';
 import AppearanceView from './views/AppearanceView.vue';
@@ -101,7 +102,6 @@ const dashboardModel = DashboardModel.create();
 const profileModel = ProfileModel.create();
 const provisionModel = ProvisionModel.create();
 
-const sidebar = useTemplateRef('sidebar');
 const subscriptionRequiredDialog = useTemplateRef('subscriptionRequiredDialog');
 const ready = ref(false);
 const view = ref('');
@@ -114,22 +114,6 @@ const config = ref({});
 const avatarUrl = ref('');
 const features = ref({});
 
-function onSidebarClose() {
-  sidebar.value.close();
-}
-
-const SIDEBAR_GROUPS = Object.freeze({
-  BACKUP: 'backup',
-  EMAIL: 'email',
-  SYSTEM: 'system',
-  USERS: 'users'
-});
-
-const activeSidebarGroups = ref({});
-function onToggleGroup(group) {
-  activeSidebarGroups.value[group] = !activeSidebarGroups.value[group];
-}
-
 function onHashChange() {
   const v = window.location.hash.split('?')[0];
 
@@ -288,69 +272,7 @@ onMounted(async () => {
     <RequestErrorDialog/>
 
     <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
-      <SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
-        <a href="#/" class="sidebar-logo" @click="onSidebarClose()">
-          <img :src="avatarUrl" :alt="(config.cloudronName || 'Cloudron') + ' icon'"/> {{ config.cloudronName || 'Cloudron' }}
-        </a>
-        <div class="sidebar-list">
-          <a class="sidebar-item" :class="{ active: view === VIEWS.APPS || view === VIEWS.APP }" :href="VIEWS.APPS" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
-          <a class="sidebar-item" :class="{ active: view === VIEWS.APPSTORE }" v-show="profile.isAtLeastAdmin" :href="VIEWS.APPSTORE" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
-          <hr/>
-
-          <a class="sidebar-item" :class="{ active: view === VIEWS.DOMAINS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.DOMAINS" @click="onSidebarClose()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
-
-          <div class="sidebar-item" v-show="profile.isAtLeastUserManager" @click="onToggleGroup(SIDEBAR_GROUPS.USERS)"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.USERS] }" style="margin-left: 6px;"></i></div>
-          <Transition name="sidebar-item-group-animation">
-            <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.USERS]">
-              <a class="sidebar-item" :class="{ active: view === VIEWS.USERS }" v-show="profile.isAtLeastUserManager" :href="VIEWS.USERS" @click="onSidebarClose()"><i class="fa fa-user fa-fw"></i> {{ $t('main.navbar.users') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.GROUPS }" v-show="profile.isAtLeastUserManager" :href="VIEWS.GROUPS" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.groups') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.LDAP }" v-show="profile.isAtLeastAdmin" :href="VIEWS.LDAP" @click="onSidebarClose()"><i class="fa fa-fw fa-users-rays"></i> LDAP</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.OPENID }" v-show="profile.isAtLeastAdmin" :href="VIEWS.OPENID" @click="onSidebarClose()"><i class="fa fa-fw fa-brands fa-openid"></i> OpenID</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.USER_DIRECTORY_SETTINGS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.USER_DIRECTORY_SETTINGS" @click="onSidebarClose()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('userdirectory.settings.title') }}</a>
-            </div>
-          </Transition>
-
-          <div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup(SIDEBAR_GROUPS.EMAIL)"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.EMAIL] }" style="margin-left: 6px;"></i></div>
-          <Transition name="sidebar-item-group-animation">
-            <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.EMAIL]">
-              <a class="sidebar-item" :class="{ active: view === VIEWS.EMAIL_DOMAINS || view === VIEWS.EMAIL_DOMAIN }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_DOMAINS" @click="onSidebarClose()"><i class="fa fa-fw fa-globe"></i> Domains</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.MAILBOXES }" :href="VIEWS.MAILBOXES" @click="onSidebarClose()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.MAILINGLISTS }" :href="VIEWS.MAILINGLISTS" @click="onSidebarClose()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.EMAIL_EVENTLOG }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_EVENTLOG" @click="onSidebarClose()"><i class="fa fa-fw fa-list-alt"></i> {{ $t('emails.eventlog.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.EMAIL_SETTINGS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_SETTINGS" @click="onSidebarClose()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('emails.settings.title') }}</a>
-            </div>
-          </Transition>
-
-          <a class="sidebar-item" :class="{ active: view === VIEWS.NETWORK }" v-show="profile.isAtLeastAdmin" :href="VIEWS.NETWORK" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
-          <a class="sidebar-item" :class="{ active: view === VIEWS.VOLUMES }" v-show="profile.isAtLeastAdmin" :href="VIEWS.VOLUMES" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
-
-          <div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup(SIDEBAR_GROUPS.BACKUP)"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.BACKUP] }" style="margin-left: 6px;"></i></div>
-          <Transition name="sidebar-item-group-animation">
-            <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.BACKUP]">
-              <a class="sidebar-item" :class="{ active: view === VIEWS.BACKUP_SITES }" :href="VIEWS.BACKUP_SITES" @click="onSidebarClose()"><i class="fa fa-fw fa-hard-drive"></i> {{ $t('backups.sites.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.APP_ARCHIVE }" :href="VIEWS.APP_ARCHIVE" @click="onSidebarClose()"><i class="fa fa-fw fa-grip"></i> {{ $t('backups.archives.title') }}</a>
-            </div>
-          </Transition>
-
-          <a class="sidebar-item" :class="{ active: view === VIEWS.APPEARANCE }" v-show="profile.isAtLeastAdmin" :href="VIEWS.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(SIDEBAR_GROUPS.SYSTEM)"><i class="fa fa-server fa-fw"></i> {{ $t('system.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.SYSTEM] }" style="margin-left: 6px;"></i></div>
-          <Transition name="sidebar-item-group-animation">
-            <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.SYSTEM]">
-              <a class="sidebar-item" :class="{ active: view === VIEWS.DOCKER }" :href="VIEWS.DOCKER" @click="onSidebarClose()"><i class="fa-brands fa-fw fa-docker"></i> Docker</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.SERVICES }" v-show="profile.isAtLeastAdmin" :href="VIEWS.SERVICES" @click="onSidebarClose()"><i class="fa fa-diagram-project fa-fw"></i> {{ $t('services.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.SYSTEM_EVENTLOG }" :href="VIEWS.SYSTEM_EVENTLOG" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.SYSTEM_UPDATE }" :href="VIEWS.SYSTEM_UPDATE" @click="onSidebarClose()"><i class="fa fa-fw fa-square-up-right"></i> {{ $t('settings.updates.title') }}</a>
-              <a class="sidebar-item" :class="{ active: view === VIEWS.SYSTEM_SETTINGS }" :href="VIEWS.SYSTEM_SETTINGS" @click="onSidebarClose()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('system.settings.title') }}</a>
-            </div>
-          </Transition>
-
-          <hr v-show="profile.isAtLeastAdmin"/>
-
-          <a class="sidebar-item" :class="{ active: view === VIEWS.SERVER }" v-show="profile.isAtLeastAdmin" :href="VIEWS.SERVER" @click="onSidebarClose()"><i class="fa fa-microchip fa-fw"></i> {{ $t('server.title') }}</a>
-          <a class="sidebar-item" :class="{ active: view === VIEWS.CLOUDRON_ACCOUNT }" v-show="profile.isAtLeastOwner" :href="VIEWS.CLOUDRON_ACCOUNT" @click="onSidebarClose()"><i class="fa fa-crown fa-fw"></i> {{ $t('settings.appstoreAccount.title') }}</a>
-        </div>
-      </SideBar>
+      <SideBar v-if="profile.isAtLeastUserManager" :profile="profile" :active-view="view" :VIEWS="VIEWS" :cloudron-name="config.cloudronName" :cloudron-avatar-url="avatarUrl"/>
 
       <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
         <Headerbar :config="config" :subscription="subscription"/>
@@ -391,117 +313,3 @@ onMounted(async () => {
     </div>
   </div>
 </template>
-
-<style scoped>
-
-.pankow-sidebar {
-  background-color: var(--navbar-background);
-  padding: 22px 10px 10px 10px;
-  margin-right: 20px;
-  /* width is optimized for english */
-  min-width: 250px;
-}
-
-.sidebar-logo img {
-  margin-right: 10px;
-  height: 40px;
-  width: 40px;
-  border-radius: var(--pankow-border-radius);
-}
-
-.sidebar-logo,
-.sidebar-logo:hover {
-  display: flex;
-  align-items: center;
-  color: var(--pankow-text-color);
-  text-decoration: none;
-  padding-left: 10px;
-  max-width: 300px;
-  overflow: hidden;
-  min-height: 55px;
-}
-
-.sidebar-list {
-  overflow: auto;
-  padding-top: 25px;
-  scrollbar-color: transparent transparent;
-  scrollbar-width: thin;
-}
-
-.sidebar-list:hover {
-  scrollbar-color: var(--color-neutral-border) transparent;
-}
-
-.sidebar-item {
-  display: block;
-  color: var(--pankow-text-color);
-  border-radius: 3px;
-  padding: 10px 15px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all 180ms ease-out;
-}
-
-.sidebar-item i {
-  opacity: 0.5;
-  margin-right: 10px;
-}
-
-.sidebar-item.active {
-  color: var(--pankow-color-primary);
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.sidebar-item:hover {
-  background-color: #e9ecef;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  .sidebar-item:hover {
-    background-color: var(--card-background);
-  }
-}
-
-.sidebar-item.active i ,
-.sidebar-item:hover i {
-  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;
-}
-
-.slide-fade-enter-active {
-  transition: all 0.1s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.1s ease-out;
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-
-</style>
diff --git a/dashboard/src/components/SideBar.vue b/dashboard/src/components/SideBar.vue
new file mode 100644
index 000000000..4dc23eb4f
--- /dev/null
+++ b/dashboard/src/components/SideBar.vue
@@ -0,0 +1,302 @@
+<script setup>
+
+import { ref, useTemplateRef, onMounted } from 'vue';
+import { onSwipe } from '@cloudron/pankow/gestures.js';
+
+defineProps({
+  cloudronAvatarUrl: {
+    type: String,
+    default: '',
+  },
+  cloudronName: {
+    type: String,
+    default: 'Cloudron',
+  },
+  VIEWS: {
+    type: Object,
+    required: true,
+  },
+  activeView: {
+    type: Object,
+    required: true,
+  },
+  profile: {
+    type: Object,
+    required: true,
+  }
+});
+
+const SIDEBAR_GROUPS = Object.freeze({
+  BACKUP: 'backup',
+  EMAIL: 'email',
+  SYSTEM: 'system',
+  USERS: 'users'
+});
+
+const sideBar = useTemplateRef('sideBar');
+const isVisible = ref(false);
+
+const activeSidebarGroups = ref({});
+function onToggleGroup(group) {
+  activeSidebarGroups.value[group] = !activeSidebarGroups.value[group];
+}
+
+function open() {
+  isVisible.value = true;
+}
+
+function close() {
+  isVisible.value = false;
+}
+
+onMounted(() => {
+  onSwipe(sideBar.value, (direction) => {
+    if (direction === 'left') close();
+  });
+});
+
+</script>
+
+<template>
+  <div class="sidebar" ref="sideBar" :class="{ 'sidebar-closed': !isVisible }">
+    <Transition name="pankow-scale">
+      <div class="sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
+      <div class="sidebar-open-action" v-else @click="open()"><i class="fa-solid fa-bars"></i></div>
+    </Transition>
+    <div class="sidebar-inner">
+      <a href="#/" class="sidebar-logo" @click="close()">
+        <img :src="cloudronAvatarUrl" :alt="cloudronName + ' icon'"/> {{ cloudronName }}
+      </a>
+      <div class="sidebar-list">
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.APPS || activeView === VIEWS.APP }" :href="VIEWS.APPS" @click="close()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.APPSTORE }" v-show="profile.isAtLeastAdmin" :href="VIEWS.APPSTORE" @click="close()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
+        <hr/>
+
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.DOMAINS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.DOMAINS" @click="close()"><i class="fa fa-globe fa-fw"></i> {{ $t('domains.title') }}</a>
+
+        <div class="sidebar-item" v-show="profile.isAtLeastUserManager" @click="onToggleGroup(SIDEBAR_GROUPS.USERS)"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.USERS] }" style="margin-left: 6px;"></i></div>
+        <Transition name="sidebar-item-group-animation">
+          <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.USERS]">
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.USERS }" v-show="profile.isAtLeastUserManager" :href="VIEWS.USERS" @click="close()"><i class="fa fa-user fa-fw"></i> {{ $t('main.navbar.users') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.GROUPS }" v-show="profile.isAtLeastUserManager" :href="VIEWS.GROUPS" @click="close()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.groups') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.LDAP }" v-show="profile.isAtLeastAdmin" :href="VIEWS.LDAP" @click="close()"><i class="fa fa-fw fa-users-rays"></i> LDAP</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.OPENID }" v-show="profile.isAtLeastAdmin" :href="VIEWS.OPENID" @click="close()"><i class="fa fa-fw fa-brands fa-openid"></i> OpenID</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.USER_DIRECTORY_SETTINGS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.USER_DIRECTORY_SETTINGS" @click="close()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('userdirectory.settings.title') }}</a>
+          </div>
+        </Transition>
+
+        <div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup(SIDEBAR_GROUPS.EMAIL)"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.EMAIL] }" style="margin-left: 6px;"></i></div>
+        <Transition name="sidebar-item-group-animation">
+          <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.EMAIL]">
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.EMAIL_DOMAINS || activeView === VIEWS.EMAIL_DOMAIN }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_DOMAINS" @click="close()"><i class="fa fa-fw fa-globe"></i> Domains</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.MAILBOXES }" :href="VIEWS.MAILBOXES" @click="close()"><i class="fa fa-fw fa-inbox"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.MAILINGLISTS }" :href="VIEWS.MAILINGLISTS" @click="close()"><i class="fa fa-fw-solid fa-envelopes-bulk"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.EMAIL_EVENTLOG }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_EVENTLOG" @click="close()"><i class="fa fa-fw fa-list-alt"></i> {{ $t('emails.eventlog.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.EMAIL_SETTINGS }" v-show="profile.isAtLeastAdmin" :href="VIEWS.EMAIL_SETTINGS" @click="close()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('emails.settings.title') }}</a>
+          </div>
+        </Transition>
+
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.NETWORK }" v-show="profile.isAtLeastAdmin" :href="VIEWS.NETWORK" @click="close()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.VOLUMES }" v-show="profile.isAtLeastAdmin" :href="VIEWS.VOLUMES" @click="close()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
+
+        <div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup(SIDEBAR_GROUPS.BACKUP)"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.BACKUP] }" style="margin-left: 6px;"></i></div>
+        <Transition name="sidebar-item-group-animation">
+          <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.BACKUP]">
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.BACKUP_SITES }" :href="VIEWS.BACKUP_SITES" @click="close()"><i class="fa fa-fw fa-hard-drive"></i> {{ $t('backups.sites.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.APP_ARCHIVE }" :href="VIEWS.APP_ARCHIVE" @click="close()"><i class="fa fa-fw fa-grip"></i> {{ $t('backups.archives.title') }}</a>
+          </div>
+        </Transition>
+
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.APPEARANCE }" v-show="profile.isAtLeastAdmin" :href="VIEWS.APPEARANCE" @click="close()"><i class="fa fa-pen-ruler fa-fw"></i> {{ $t('appearance.title') }}</a>
+
+        <div class="sidebar-item" v-show="profile.isAtLeastAdmin" @click="onToggleGroup(SIDEBAR_GROUPS.SYSTEM)"><i class="fa fa-server fa-fw"></i> {{ $t('system.title') }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: activeSidebarGroups[SIDEBAR_GROUPS.SYSTEM] }" style="margin-left: 6px;"></i></div>
+        <Transition name="sidebar-item-group-animation">
+          <div class="sidebar-item-group" v-if="activeSidebarGroups[SIDEBAR_GROUPS.SYSTEM]">
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.DOCKER }" :href="VIEWS.DOCKER" @click="close()"><i class="fa-brands fa-fw fa-docker"></i> Docker</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.SERVICES }" v-show="profile.isAtLeastAdmin" :href="VIEWS.SERVICES" @click="close()"><i class="fa fa-diagram-project fa-fw"></i> {{ $t('services.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.SYSTEM_EVENTLOG }" :href="VIEWS.SYSTEM_EVENTLOG" @click="close()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.SYSTEM_UPDATE }" :href="VIEWS.SYSTEM_UPDATE" @click="close()"><i class="fa fa-fw fa-square-up-right"></i> {{ $t('settings.updates.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeView === VIEWS.SYSTEM_SETTINGS }" :href="VIEWS.SYSTEM_SETTINGS" @click="close()"><i class="fa fa-fw fa-screwdriver-wrench"></i> {{ $t('system.settings.title') }}</a>
+          </div>
+        </Transition>
+
+        <hr v-show="profile.isAtLeastAdmin"/>
+
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.SERVER }" v-show="profile.isAtLeastAdmin" :href="VIEWS.SERVER" @click="close()"><i class="fa fa-microchip fa-fw"></i> {{ $t('server.title') }}</a>
+        <a class="sidebar-item" :class="{ active: activeView === VIEWS.CLOUDRON_ACCOUNT }" v-show="profile.isAtLeastOwner" :href="VIEWS.CLOUDRON_ACCOUNT" @click="close()"><i class="fa fa-crown fa-fw"></i> {{ $t('settings.appstoreAccount.title') }}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.sidebar {
+  display: block;
+  height: 100%;
+  overflow: auto;
+  background-color: var(--navbar-background);
+  padding: 22px 10px 10px 10px;
+  margin-right: 20px;
+  /* width is optimized for english */
+  min-width: 250px;
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.sidebar-open-action {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 24px;
+  padding: 8px 14px;
+  cursor: pointer;
+  color: var(--pankow-color-dark);
+}
+
+.sidebar-close-action {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  font-size: 32px;
+  padding: 8px 20px;
+  cursor: pointer;
+}
+
+.sidebar-logo img {
+  margin-right: 10px;
+  height: 40px;
+  width: 40px;
+  border-radius: var(--pankow-border-radius);
+}
+
+.sidebar-logo,
+.sidebar-logo:hover {
+  display: flex;
+  align-items: center;
+  color: var(--pankow-text-color);
+  text-decoration: none;
+  padding-left: 10px;
+  max-width: 300px;
+  overflow: hidden;
+  min-height: 55px;
+}
+
+.sidebar-list {
+  overflow: auto;
+  padding-top: 25px;
+  scrollbar-color: transparent transparent;
+  scrollbar-width: thin;
+}
+
+.sidebar-list:hover {
+  scrollbar-color: var(--color-neutral-border) transparent;
+}
+
+.sidebar-item {
+  display: block;
+  color: var(--pankow-text-color);
+  border-radius: 3px;
+  padding: 10px 15px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 180ms ease-out;
+}
+
+.sidebar-item i {
+  opacity: 0.5;
+  margin-right: 10px;
+}
+
+.sidebar-item.active {
+  color: var(--pankow-color-primary);
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.sidebar-item:hover {
+  background-color: #e9ecef;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .sidebar-item:hover {
+    background-color: var(--card-background);
+  }
+}
+
+.sidebar-item.active i ,
+.sidebar-item:hover i {
+  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;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+@media (max-width: 576px) {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2000;
+    transition: left 250ms ease-in-out;
+  }
+
+  .sidebar-closed {
+    position: fixed;
+    left: -600px;  /* depends on media query */
+  }
+
+  .sidebar-open-action {
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2000;
+  }
+
+  .sidebar-close-action {
+    display: block;
+  }
+}
+
+</style>
\ No newline at end of file