diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 75c5672b..a92f709f 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,12 +1,10 @@
 <template>
   <div class="sidebar-logo-container">
     <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" class="sidebar-logo-link" to="/">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img :src="logo" class="sidebar-logo">
       </router-link>
-    </transition>
-    <transition name="sidebarLogoFade">
-      <router-link v-if="!collapse" to="/" class="sidebar-logo-link">
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img :src="logo" class="sidebar-logo">
         <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
@@ -32,15 +30,17 @@ export default {
 }
 </script>
 
- <style rel="stylesheet/scss" lang="scss" scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
 .sidebarLogoFade-enter-active {
   transition: opacity 1.5s;
 }
- .sidebarLogoFade-enter,
+
+.sidebarLogoFade-enter,
 .sidebarLogoFade-leave-to {
   opacity: 0;
 }
- .sidebar-logo-container {
+
+.sidebar-logo-container {
   position: relative;
   width: 100%;
   height: 50px;
@@ -48,15 +48,18 @@ export default {
   background: #2b2f3a;
   text-align: center;
   overflow: hidden;
-   & .sidebar-logo-link {
+
+  & .sidebar-logo-link {
     height: 100%;
     width: 100%;
-     & .sidebar-logo {
+
+    & .sidebar-logo {
       width: 32px;
       height: 32px;
       vertical-align: middle;
     }
-     & .sidebar-title {
+
+    & .sidebar-title {
       display: inline-block;
       margin: 0 0 0 12px;
       color: #fff;