Remove sidebar for normal users and add logo to header bar

dashboard/src/components/Headerbar.vue

@@ -6,7 +6,7 @@ import { eachLimit } from 'async';
 import { Button, Popover } from 'pankow';
 import NotificationsModel from '../models/NotificationsModel.js';
 
-const props = defineProps(['profile', 'subscription']);
+const props = defineProps(['config', 'profile', 'subscription']);
 
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
@@ -53,7 +53,7 @@ async function refresh() {
 }
 
 onMounted(async () => {
-  await refresh();
+  if (props.profile.isAtLeastAdmin) await refresh();
 });
 
 </script>
@@ -80,7 +80,14 @@ onMounted(async () => {
       </div>
     </Popover>
 
+    <div v-if="!profile.isAtLeastUserManager">
+      <a href="#/" class="headerbar-logo" @click="onClose()">
+        <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
+      </a>
+    </div>
+
     <div style="flex-grow: 1;"></div>
+
     <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
       <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
         {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
@@ -91,7 +98,7 @@ onMounted(async () => {
     </div>
     <Button plain secondary tool v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton.$el)" :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'">{{ notifications.length > 99 ? '99+' : notifications.length }}</Button>
     <Button plain secondary tool v-if="profile.isAtLeastAdmin" href="#/support" icon="fa fa-question fa-fw"/>
-    <Button plain secondary v-if="profile.isAtLeastAdmin" href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
+    <Button plain secondary href="#/profile"><img :src="profile.avatarUrl" class="headerbar-avatar"/> {{ profile.username }}</Button>
   </div>
 </template>
 
@@ -99,7 +106,8 @@ onMounted(async () => {
 
 .headerbar {
   display: flex;
-  padding: 6px;
+  padding: 10px;
+  padding-bottom: 6px;
   align-items: center;
   gap: 15px;
 }
@@ -116,6 +124,20 @@ onMounted(async () => {
   border-radius: var(--pankow-border-radius);
 }
 
+.headerbar-logo img {
+  margin-right: 10px;
+  border-radius: var(--pankow-border-radius);
+}
+
+.headerbar-logo,
+.headerbar-logo:hover {
+  display: flex;
+  align-items: center;
+  color: var(--pankow-text-color);
+  text-decoration: none;
+/*  padding-left: 10px;*/
+}
+
 .notification-item {
   margin-bottom: 10px;
   padding-bottom: 10px;

dashboard/src/components/Sidebar.vue

@@ -117,6 +117,7 @@ onUnmounted(() => {
 
 .sidebar-logo img {
   margin-right: 10px;
+  border-radius: var(--pankow-border-radius);
 }
 
 .sidebar-logo,