Merge branch '309-add-logo-to-hamburger-menu' into 'develop'

Add logo and sitename to the side drawer area

Closes #309

See merge request pleroma/pleroma-fe!517

2 files changed, 29 insertions, 3 deletions

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 754a57e0..40ffa1dd 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -26,6 +26,12 @@ const SideDrawer = {
     },
     suggestionsEnabled () {
       return this.$store.state.instance.suggestionsEnabled
+    },
+    logo () {
+      return this.$store.state.instance.logo
+    },
+    sitename () {
+      return this.$store.state.instance.name
     }
   },
   methods: {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index fc90977b..a6c6f237 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -8,8 +8,11 @@
       @touchmove="touchMove"
     >
       <div class="side-drawer-heading" @click="toggleDrawer">
-        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser">
-        </user-card-content>
+        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
+        <div class="side-drawer-logo-wrapper" v-else>
+          <img :src="logo"/>
+          <span>{{sitename}}</span>
+        </div>
       </div>
       <ul>
         <li v-if="currentUser" @click="toggleDrawer">
@@ -141,6 +144,24 @@
   background-color: var(--bg, $fallback--bg);
 }
 
+.side-drawer-logo-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 0.85em;
+
+  img {
+    flex: none;
+    height: 50px;
+    margin-right: 0.85em;
+  }
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .side-drawer-click-outside-closed {
   flex: 0 0 0;
 }
@@ -154,7 +175,6 @@
   flex-direction: column;
   align-items: stretch;
   display: flex;
-  min-height: 7em;
   padding: 0;
   margin: 0;