From c4205c1c11601310400a2dc519e59e2d6ad1da20 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 23 Mar 2025 14:29:42 +0100
Subject: [PATCH] Use pankow SideBar component

---
 dashboard/src/Index.vue              | 139 ++++++++++++++++++-
 dashboard/src/components/Sidebar.vue | 197 ---------------------------
 2 files changed, 136 insertions(+), 200 deletions(-)
 delete mode 100644 dashboard/src/components/Sidebar.vue

diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index d7f279be1..102d46841 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -1,11 +1,10 @@
 <script setup>
 
 import { onMounted, ref, useTemplateRef } from 'vue';
-import { Notification, fetcher } from 'pankow';
+import { Notification, fetcher, SideBar } from 'pankow';
 import { API_ORIGIN, TOKEN_TYPES } from './constants.js';
 import ProfileModel from './models/ProfileModel.js';
 import DashboardModel from './models/DashboardModel.js';
-import Sidebar from './components/Sidebar.vue';
 import Headerbar from './components/Headerbar.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
@@ -88,6 +87,7 @@ fetcher.globalOptions.errorHook = (error) => {
 const dashboardModel = DashboardModel.create();
 const profileModel = ProfileModel.create();
 
+const sidebar = useTemplateRef('sidebar');
 const ready = ref(false);
 const view = ref('');
 const profile = ref({});
@@ -96,9 +96,24 @@ const subscription = ref({
 });
 const config = ref({});
 
+function onSidebarClose() {
+  sidebar.value.close();
+}
+
+const activeSidebarItem = ref('');
+const activeSidebarGroup = ref('');
+function onToggleGroup(group) {
+  activeSidebarGroup.value = activeSidebarGroup.value === group ? '' : group;
+}
+
 function onHashChange() {
   const v = location.hash.slice(2);
 
+  activeSidebarItem.value = v;
+
+  if (activeSidebarItem.value.indexOf('email') === 0) activeSidebarGroup.value = 'email';
+  else activeSidebarGroup.value = '';
+
   if (v === VIEWS.APPS) {
     view.value = VIEWS.APPS;
   } else if (v.indexOf(VIEWS.APPSTORE) === 0) {
@@ -184,7 +199,35 @@ onMounted(async () => {
     <Transition name="pankow-animation-pop-up">
       <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
 
-        <Sidebar v-if="profile.isAtLeastUserManager" :profile="profile" :config="config"/>
+        <!-- <Sidebar :profile="profile" :config="config"/> -->
+        <SideBar v-if="profile.isAtLeastUserManager" ref="sidebar">
+          <a href="#/" class="sidebar-logo" @click="onSidebarClose()">
+            <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+          </a>
+          <div class="sidebar-list">
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'backups' }" v-show="profile.isAtLeastAdmin" href="#/backups" @click="onSidebarClose()"><i class="fa fa-archive fa-fw"></i> {{ $t('backups.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'branding' }" v-show="profile.isAtLeastAdmin" href="#/branding" @click="onSidebarClose()"><i class="fa fa-passport fa-fw"></i> {{ $t('branding.title') }}</a>
+            <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 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="activeSidebarGroup === 'email'">
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'emails-mailboxes' }" href="#/emails-mailboxes" @click="onSidebarClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'emails-mailinglists' }" href="#/emails-mailinglists" @click="onSidebarClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email' }" href="#/email" @click="onSidebarClose()"><i class="fa fa-cog fa-fw"></i> {{ $t('emails.title') }} {{ $t('settings.title') }}</a>
+              </div>
+            </Transition>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
+            <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>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'settings' }" v-show="profile.isAtLeastAdmin" href="#/settings" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory' }" v-show="profile.isAtLeastAdmin" href="#/user-directory" @click="onSidebarClose()"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
+            <a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
+          </div>
+        </SideBar>
 
         <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
           <Headerbar :config="config" :subscription="subscription" :profile="profile"/>
@@ -218,3 +261,93 @@ onMounted(async () => {
 
   </div>
 </template>
+
+<style scoped>
+
+.pankow-sidebar {
+  background-color: var(--navbar-background);
+  border-right: 1px solid var(--pankow-color-background-hover);
+  padding: 22px 10px 10px 10px;
+  margin-right: 20px;
+}
+
+.sidebar-logo img {
+  margin-right: 10px;
+  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;
+}
+
+.sidebar-list {
+  overflow: auto;
+  padding-top: 20px;
+  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;
+}
+
+.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;
+}
+
+</style>
diff --git a/dashboard/src/components/Sidebar.vue b/dashboard/src/components/Sidebar.vue
deleted file mode 100644
index 2aa93a9f4..000000000
--- a/dashboard/src/components/Sidebar.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup>
-
-import { ref, onMounted, onUnmounted } from 'vue';
-
-const props = defineProps(['config', 'profile']);
-
-const active = ref('');
-const isOpen = ref(false); // only applies to mobile for now
-
-function onToggle() {
-  isOpen.value = !isOpen.value;
-}
-
-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(() => {
-  window.addEventListener('hashchange', onHashChange);
-  onHashChange();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('hashchange', onHashChange);
-});
-
-</script>
-
-<template>
-  <div>
-    <div @click="onToggle()" class="sidebar-toggle-button"><i class="fa-solid fa-bars"></i></div>
-
-    <div class="sidebar" :class="{ 'open': isOpen }">
-      <a href="#/" class="sidebar-logo" @click="onClose()">
-        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
-      </a>
-      <div class="sidebar-list">
-        <a class="sidebar-item" :class="{ active: active === 'apps' }" href="#/apps" @click="onClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
-        <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>
-        <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>
-        <a class="sidebar-item" :class="{ active: active === 'settings' }" v-show="profile.isAtLeastAdmin" href="#/settings" @click="onClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'user-directory' }" v-show="profile.isAtLeastAdmin" href="#/user-directory" @click="onClose()"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
-        <a class="sidebar-item" :class="{ active: active === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-.sidebar-toggle-button {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-}
-
-.sidebar {
-  position: relative;
-  z-index: 1000;
-  transition: all 250ms ease;
-  min-width: 280px;
-  height: 100%;
-  white-space: nowrap !important;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--navbar-background);
-  border-right: 1px solid var(--pankow-color-background-hover);
-  padding: 22px 10px 10px 10px;
-  margin-right: 20px;
-}
-
-@media(max-width:767px) {
-  .sidebar {
-    margin-right: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 0;
-    min-width: 0;
-    padding: 22px 0 10px 0;
-    border-right: 0;
-  }
-
-  .sidebar.open {
-    width: 100%;
-    padding: 22px 10px 10px 10px;
-  }
-}
-
-.sidebar-logo img {
-  margin-right: 10px;
-  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;
-}
-
-.sidebar-list {
-  overflow: auto;
-  padding-top: 20px;
-  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;
-}
-
-.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;
-}
-
-</style>