Add basic header component

src/components/CloudronHeader.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="cloudron-header">
+    <div class="cloudron-header-left">
+      <slot name="left"/>
+    </div>
+    <div class="cloudron-header-right">
+      <slot name="right"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+};
+
+</script>
+
+<style>
+
+.cloudron-header {
+  width: 100%;
+  background-color: #f8f8f8;
+  box-shadow: 0 2px 5px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 5px 10px;
+}
+
+.cloudron-header-left {
+  display: block;
+  margin: auto 0px;
+}
+
+.cloudron-header-right {
+  display: block;
+  margin: auto 0px;
+}
+
+</style>

src/style.css

@@ -1,12 +1,9 @@
-html {
-  /* this also defines the overall widget size as all sizes are in rem */
-  font-size: 13px;
+html, body {
+  font-size: 13px; /* this also defines the overall widget size as all sizes are in rem */
   height: 100%;
   width: 100%;
   padding: 0;
-}
-
-body {
+  margin: 0;
   background-color: #e5e5e5;
 }
 

src/views/Home.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
-    <div>
-      <span>You are logged in</span>
-      <Button label="Logout" @click="onLogout"/>
-    </div>
+    <CloudronHeader>
+      <template #left>
+        <span>You are logged in</span>
+      </template>
+      <template #right>
+        <Button label="Logout" @click="onLogout"/>
+      </template>
+    </CloudronHeader>
     <div class="main-view">
       <DirectoryView />
     </div>
@@ -15,11 +19,13 @@
 import Button from 'primevue/button';
 
 import DirectoryView from '../components/DirectoryView.vue';
+import CloudronHeader from '../components/CloudronHeader.vue';
 
 export default {
   name: 'Home',
   components: {
     DirectoryView,
+    CloudronHeader,
     Button
   },
   methods: {