diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index b511cb1d2..ec98c4921 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -1,5 +1,9 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { onMounted, ref, useTemplateRef, provide } from 'vue';
 import { Notification, fetcher } from '@cloudron/pankow';
 import { setLanguage } from './i18n.js';
@@ -74,6 +78,174 @@ const VIEWS = Object.freeze({
   VOLUMES: '#/volumes',
 });
 
+const menuItems = ref([{
+  label: t('apps.title'),
+  icon: 'fa fa-grip fa-fw',
+  route: VIEWS.APPS,
+  active: () => view.value === VIEWS.APPS || view.value === VIEWS.APP,
+}, {
+  label: t('appstore.title'),
+  icon: 'fa fa-cloud-download-alt fa-fw',
+  route: VIEWS.APPSTORE,
+  active: () => view.value === VIEWS.APPSTORE,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  separator: true,
+}, {
+  label: t('domains.title'),
+  icon: 'fa fa-globe fa-fw',
+  route: VIEWS.DOMAINS,
+  active: () => view.value === VIEWS.DOMAINS,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('users.title'),
+  icon: 'fa fa-users-gear fa-fw',
+  visible: () => profile.value.isAtLeastUserManager,
+  active: () => view.value === VIEWS.APPS || view.value === VIEWS.APP,
+  childItems: [{
+    label: t('main.navbar.users'),
+    icon: 'fa fa-user fa-fw',
+    route: VIEWS.USERS,
+    active: () => view.value === VIEWS.USERS,
+    visible: () => profile.value.isAtLeastUserManager,
+  }, {
+    label: t('main.navbar.groups'),
+    icon: 'fa fa-users fa-fw',
+    route: VIEWS.GROUPS,
+    active: () => view.value === VIEWS.GROUPS,
+    visible: () => profile.value.isAtLeastUserManager,
+  }, {
+    label: 'LDAP',
+    icon: 'fa fa-fw fa-users-rays',
+    route: VIEWS.LDAP,
+    active: () => view.value === VIEWS.LDAP,
+    visible: () => profile.value.isAtLeastAdmin,
+  }, {
+    label: 'OpenID',
+    icon: 'fa fa-fw fa-brands fa-openid',
+    route: VIEWS.OPENID,
+    active: () => view.value === VIEWS.OPENID,
+    visible: () => profile.value.isAtLeastAdmin,
+  }, {
+    label: t('userdirectory.settings.title'),
+    icon: 'fa fa-fw fa-screwdriver-wrench',
+    route: VIEWS.USER_DIRECTORY_SETTINGS,
+    active: () => view.value === VIEWS.USER_DIRECTORY_SETTINGS,
+    visible: () => profile.value.isAtLeastAdmin,
+  }],
+}, {
+  label: t('emails.title'),
+  icon: 'fa fa-envelope fa-fw',
+  visible: () => profile.value.isAtLeastMailManager,
+  childItems: [{
+    label: 'Domains',
+    icon: 'fa fa-fw fa-globe',
+    route: VIEWS.EMAIL_DOMAINS,
+    active: () => view.value === VIEWS.EMAIL_DOMAINS || view.value === VIEWS.EMAIL_DOMAIN,
+    visible: () => profile.value.isAtLeastAdmin,
+  }, {
+    label: t('email.incoming.mailboxes.title'),
+    icon: 'fa fa-fw fa-inbox',
+    route: VIEWS.MAILBOXES,
+    active: () => view.value === VIEWS.MAILBOXES,
+  }, {
+    label: t('email.incoming.mailinglists.title'),
+    icon: 'fa fa-fw-solid fa-envelopes-bulk',
+    route: VIEWS.MAILINGLISTS,
+    active: () => view.value === VIEWS.MAILINGLISTS,
+  }, {
+    label: t('emails.eventlog.title'),
+    icon: 'fa fa-fw fa-list-alt',
+    route: VIEWS.EMAIL_EVENTLOG,
+    active: () => view.value === VIEWS.EMAIL_EVENTLOG,
+    visible: () => profile.value.isAtLeastAdmin,
+  }, {
+    label: t('emails.settings.title'),
+    icon: 'fa fa-fw fa-screwdriver-wrench',
+    route: VIEWS.EMAIL_SETTINGS,
+    active: () => view.value === VIEWS.EMAIL_SETTINGS,
+    visible: () => profile.value.isAtLeastAdmin,
+  }]
+}, {
+  label: t('network.title'),
+  icon: 'fas fa-network-wired fa-fw',
+  route: VIEWS.NETWORK,
+  active: () => view.value === VIEWS.NETWORK,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('volumes.title'),
+  icon: 'fa fa-hdd fa-fw',
+  route: VIEWS.VOLUMES,
+  active: () => view.value === VIEWS.VOLUMES,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('backups.title'),
+  icon: 'fa fa-archive fa-fw',
+  visible: () => profile.value.isAtLeastAdmin,
+  childItems: [{
+    label: t('backups.sites.title'),
+    icon: 'fa fa-fw fa-hard-drive',
+    route: VIEWS.BACKUP_SITES,
+    active: () => view.value === VIEWS.BACKUP_SITES,
+  }, {
+    label: t('backups.archives.title'),
+    icon: 'fa fa-fw fa-grip',
+    route: VIEWS.APP_ARCHIVE,
+    active: () => view.value === VIEWS.APP_ARCHIVE,
+  }]
+}, {
+  label: t('appearance.title'),
+  icon: 'fa fa-pen-ruler fa-fw',
+  route: VIEWS.APPEARANCE,
+  active: () => view.value === VIEWS.APPEARANCE,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('system.title'),
+  icon: 'fa fa-server fa-fw',
+  visible: () => profile.value.isAtLeastAdmin,
+  childItems: [{
+    label: 'Docker',
+    icon: 'fa-brands fa-fw fa-docker',
+    route: VIEWS.DOCKER,
+    active: () => view.value === VIEWS.DOCKER,
+  }, {
+    label: t('services.title'),
+    icon: 'fa fa-diagram-project fa-fw',
+    route: VIEWS.SERVICES,
+    active: () => view.value === VIEWS.SERVICES,
+  }, {
+    label: t('eventlog.title'),
+    icon: 'fa fa-list-alt fa-fw',
+    route: VIEWS.SYSTEM_EVENTLOG,
+    active: () => view.value === VIEWS.SYSTEM_EVENTLOG,
+  }, {
+    label: t('settings.updates.title'),
+    icon: 'fa fa-fw fa-square-up-right',
+    route: VIEWS.SYSTEM_UPDATE,
+    active: () => view.value === VIEWS.SYSTEM_UPDATE,
+  }, {
+    label: t('system.settings.title'),
+    icon: 'fa fa-fw fa-screwdriver-wrench',
+    route: VIEWS.SYSTEM_SETTINGS,
+    active: () => view.value === VIEWS.SYSTEM_SETTINGS,
+  }]
+}, {
+  separator: true,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('server.title'),
+  icon: 'fa fa-fw fa-microchip',
+  route: VIEWS.SERVER,
+  active: () => view.value === VIEWS.SERVER,
+  visible: () => profile.value.isAtLeastAdmin,
+}, {
+  label: t('settings.appstoreAccount.title'),
+  icon: 'fa fa-fw fa-crown',
+  route: VIEWS.CLOUDRON_ACCOUNT,
+  active: () => view.value === VIEWS.CLOUDRON_ACCOUNT,
+  visible: () => profile.value.isAtLeastOwner,
+}]);
+
 const offlineOverlay = useTemplateRef('offlineOverlay');
 
 fetcher.globalOptions.errorHook = (error) => {
@@ -272,7 +444,7 @@ onMounted(async () => {
     <RequestErrorDialog/>
 
     <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
-      <SideBar v-if="profile.isAtLeastUserManager" :profile="profile" :active-view="view" :VIEWS="VIEWS" :cloudron-name="config.cloudronName" :cloudron-avatar-url="avatarUrl"/>
+      <SideBar v-if="profile.isAtLeastUserManager" :items="menuItems" :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"/>
diff --git a/dashboard/src/components/SideBar.vue b/dashboard/src/components/SideBar.vue
index 4dc23eb4f..b5f6520cd 100644
--- a/dashboard/src/components/SideBar.vue
+++ b/dashboard/src/components/SideBar.vue
@@ -2,6 +2,7 @@
 
 import { ref, useTemplateRef, onMounted } from 'vue';
 import { onSwipe } from '@cloudron/pankow/gestures.js';
+import SideBarItem from './SideBarItem.vue';
 
 defineProps({
   cloudronAvatarUrl: {
@@ -12,34 +13,14 @@ defineProps({
     type: String,
     default: 'Cloudron',
   },
-  VIEWS: {
-    type: Object,
-    required: true,
-  },
-  activeView: {
-    type: Object,
-    required: true,
-  },
-  profile: {
-    type: Object,
-    required: true,
+  items: {
+    type: Array
   }
 });
 
-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];
-}
+const isCollapsed = ref(false);
 
 function open() {
   isVisible.value = true;
@@ -58,7 +39,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="sidebar" ref="sideBar" :class="{ 'sidebar-closed': !isVisible }">
+  <div class="sidebar" ref="sideBar" :class="{ 'sidebar-closed': !isVisible, 'sidebar-collapsed': isCollapsed }">
     <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>
@@ -68,62 +49,16 @@ onMounted(() => {
         <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>
+        <SideBarItem v-for="item in items" :key="item"
+          :label="item.label"
+          :icon="item.icon"
+          :route="item.route"
+          :visible="item.visible"
+          :active="item.active"
+          :separator="item.separator"
+          :child-items="item.childItems"
+          @close="close"
+        />
       </div>
     </div>
   </div>
@@ -199,77 +134,6 @@ onMounted(() => {
   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;
diff --git a/dashboard/src/components/SideBarItem.vue b/dashboard/src/components/SideBarItem.vue
new file mode 100644
index 000000000..2c2d42267
--- /dev/null
+++ b/dashboard/src/components/SideBarItem.vue
@@ -0,0 +1,149 @@
+<script setup>
+
+import { ref, computed } from 'vue';
+import SideBarItem from './SideBarItem.vue';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+  label: {
+    type: String,
+  },
+  icon: {
+    type: String,
+  },
+  route: {
+    type: String,
+  },
+  active: {
+    type: [ Boolean, Function ],
+    default: false,
+  },
+  separator: {
+    type: Boolean,
+    default: false,
+  },
+  visible: {
+    type: [ Boolean, Function ],
+    default: true,
+  },
+  childItems: {
+    type: Array,
+    default: () => [],
+  }
+});
+
+const isActive = computed(() => {
+  const active = props.active;
+  return typeof active === 'function' ? active() : active ?? true;
+});
+
+const isVisible = computed(() => {
+  const visible = props.visible;
+  return typeof visible === 'function' ? visible() : visible ?? true;
+});
+
+const isExpanded = ref(false);
+
+function close() {
+  emit('close');
+}
+
+</script>
+
+<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> {{ label }}</a>
+    <div v-else-if="childItems.length" class="sidebar-item" @click="isExpanded = !isExpanded"><i :class="icon"></i> {{ $t(label) }} <i class="collapse fa-solid fa-angle-right" :class="{ expanded: isExpanded }" style="margin-left: 6px;"></i></div>
+
+    <Transition name="sidebar-item-group-animation">
+      <div class="sidebar-item-group" v-if="isExpanded">
+        <SideBarItem v-for="item in childItems" :key="item"
+          :label="item.label"
+          :icon="item.icon"
+          :route="item.route"
+          :visible="item.visible"
+          :active="item.active"
+          :separator="item.separator"
+          :child-items="item.childItems"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+
+.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>
\ No newline at end of file