Remove sidebar for normal users and add logo to header bar

dashboard/src/Index.vue

@@ -184,12 +184,12 @@ onMounted(async () => {
     <Transition name="pankow-animation-pop-up">
       <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
 
-        <Sidebar :profile="profile" :config="config"/>
+        <Sidebar v-if="profile.isAtLeastUserManager" :profile="profile" :config="config"/>
 
         <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
-          <Headerbar :subscription="subscription" :profile="profile"/>
+          <Headerbar :config="config" :subscription="subscription" :profile="profile"/>
 
-          <div style="overflow: auto; flex-grow: 1;">
+          <div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px;">
             <AppsView v-if="view === VIEWS.APPS" />
             <AppConfigureView v-else-if="view === VIEWS.APP" />
             <AppstoreView v-else-if="view === VIEWS.APPSTORE" />

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,

dashboard/src/views/AppsView.vue

@@ -201,7 +201,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div style="width: 100%;">
     <ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
 
     <h1 class="section-header">

dashboard/src/views/AppstoreView.vue

@@ -78,7 +78,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div style="width: 100%;">
     <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
     <ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
 

dashboard/src/views/EmailDomainView.vue

@@ -163,7 +163,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <InputDialog ref="inputDialog"/>
 
     <Dialog ref="connectionDialog"

dashboard/src/views/MailboxesView.vue

@@ -137,7 +137,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <Dialog ref="removeDialog"
       :title="$t('email.deleteMailboxDialog.title', { name: removeMailbox.name, domain: removeMailbox.domain })"
       :confirm-label="$t('email.deleteMailboxDialog.deleteAction')"

dashboard/src/views/MailinglistsView.vue

@@ -100,7 +100,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div class="content">
     <Dialog ref="removeDialog"
       :title="$t('email.deleteMailinglistDialog.title', { name: removeMailinglist.name, domain: removeMailinglist.domain })"
       :confirm-label="$t('email.deleteMailinglistDialog.deleteAction')"