Fix close sidebar when overlaid

src/renderer/components/TimelineSpace/Contents.vue

@@ -3,12 +3,14 @@
   <div id="scrollable" :class="openSideBar ? 'timeline-wrapper-with-side-bar' : 'timeline-wrapper'">
     <router-view></router-view>
   </div>
-  <side-bar></side-bar>
+  <side-bar
+    :overlaid="modalOpened"
+    ></side-bar>
 </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import SideBar from './Contents/SideBar'
 
 export default {
@@ -19,7 +21,10 @@ export default {
   computed: {
     ...mapState({
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar
-    })
+    }),
+    ...mapGetters('TimelineSpace/Modals', [
+      'modalOpened'
+    ])
   }
 }
 </script>

src/renderer/components/TimelineSpace/Contents/SideBar.vue

@@ -1,6 +1,6 @@
 <template>
 <transition name="slide-detail">
-  <div id="side_bar" v-if="openSideBar" v-shortkey="['esc']" @shortkey="close">
+  <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? {close: ['esc']} : {}" @shortkey="handleKey">
     <div class="header">
       <i class="el-icon-loading" v-show="loading"></i>
       <i class="el-icon-close" @click="close"></i>
@@ -32,6 +32,12 @@ export default {
     TootDetail,
     AccountProfile
   },
+  props: {
+    overlaid: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       loading: false
@@ -42,7 +48,10 @@ export default {
       openSideBar: state => state.TimelineSpace.Contents.SideBar.openSideBar,
       component: state => state.TimelineSpace.Contents.SideBar.component,
       backgroundColor: state => state.App.theme.background_color
-    })
+    }),
+    shortcutEnabled: function () {
+      return !this.overlaid
+    }
   },
   beforeDestroy () {
     this.close()
@@ -53,6 +62,13 @@ export default {
     },
     changeLoading (value) {
       this.loading = value
+    },
+    handleKey (event) {
+      switch (event.srcKey) {
+        case 'close':
+          this.close()
+          break
+      }
     }
   }
 }