Add logo and sitename to the side drawer area

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: {

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>
+        <div class="side-drawer__logo-wrapper">
+          <img :src="logo"/>
+          <span>{{sitename}}</span>
+        </div>
+        <user-card-content :user="currentUser" :switcher="false" :hideBio="true" v-if="currentUser"/>
       </div>
       <ul>
         <li v-if="currentUser" @click="toggleDrawer">
@@ -139,6 +142,24 @@
   box-shadow: var(--panelShadow);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+
+  &__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 {