Move logo to the left side of top bar

src/App.js

@@ -53,7 +53,8 @@ export default {
     },
     logoBgStyle () {
       return Object.assign({
-        'margin': `${this.$store.state.instance.logoMargin} 0`
+        'margin-top': `${this.$store.state.instance.logoMargin}`,
+        'margin-bottom': `${this.$store.state.instance.logoMargin}`
       }, this.enableMask ? {} : {
         'background-color': this.enableMask ? '' : 'transparent'
       })

src/App.scss

@@ -237,11 +237,9 @@ nav {
 
   .logo {
     display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    position: relative;
+
+    margin-right: .5em;
 
     align-items: stretch;
     justify-content: center;

src/App.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="app" v-bind:style="style">
     <nav class='container' @click="scrollToTop()" id="nav">
-      <div class='logo' :style='logoBgStyle'>
-        <div class='mask' :style='logoMaskStyle'></div>
-        <img :src='logo' :style='logoStyle'>
-      </div>
       <div class='inner-nav'>
         <div class='item'>
           <router-link class="back-button" @click.native="activatePanel('timeline')" :to="{ name: 'root' }" active-class="hidden">
             <i class="icon-left-open" :title="$t('nav.back')"></i>
           </router-link>
+          <div class='logo' :style='logoBgStyle'>
+            <div class='mask' :style='logoMaskStyle'></div>
+            <img :src='logo' :style='logoStyle'>
+          </div>
           <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
         </div>
         <div class='item right'>