Add logo.

src/App.js

@@ -19,6 +19,7 @@ export default {
     background () {
       return this.currentUser.background_image || this.$store.state.config.background
     },
+    logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
     style () { return { 'background-image': `url(${this.background})` } },
     sitename () { return this.$store.state.config.name }
   },

src/App.scss

@@ -63,6 +63,10 @@ nav {
         align-items: center;
         flex-basis: 920px;
         margin: auto;
+        height: 50px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
     }
 }
 

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app" v-bind:style="style" class="base02-background">
     <nav class='container base01-background base04'>
-      <div class='inner-nav'>
+      <div class='inner-nav' :style="logoStyle">
         <div class='item'>
           <a route-to='friends-timeline' href="#">{{sitename}}</a>
         </div>

src/main.js

@@ -71,8 +71,9 @@ new Vue({
 
 window.fetch('/static/config.json')
   .then((res) => res.json())
-  .then(({name, theme, background}) => {
+  .then(({name, theme, background, logo}) => {
     store.dispatch('setOption', { name: 'name', value: name })
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
+    store.dispatch('setOption', { name: 'logo', value: logo })
   })

static/config.json

@@ -1,5 +1,6 @@
 {
   "name": "Pleroma FE",
   "theme": "base16-ashes.css",
-  "background": "/static/bg.jpg"
+  "background": "/static/bg.jpg",
+  "logo": "/static/logo.png"
 }