Working sidebar on mobile

Former-commit-id: 4389362fe9a92d3f1b90bca7de9312373034449a [formerly 5c340376aa5df58f924f93d5aa534e5a6c48190b] [formerly 0e7e9e4f4584a7ac52dff5539c202602f86402d6 [formerly fb4af0afe0]]
Former-commit-id: b0f2d163f6ea189b09c17e568b8a9f97bb69c0db [formerly 3c8f7a3ffcf0baf7db7f7fb82509420188424e36]
Former-commit-id: 5b5b384652220684f831b5e83f48db1c046f8b2e

_assets/src/components/Main.vue

@@ -2,7 +2,7 @@
   <div :class="{ multiple, loading }">
     <header>
       <div>
-        <button aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
+        <button @click="openSidebar" aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
           <i class="material-icons">menu</i>
         </button>
         <img src="../assets/logo.svg" alt="File Manager">
@@ -227,6 +227,9 @@ export default {
         this.loading = false
       })
     },
+    openSidebar () {
+      this.$store.commit('showHover', 'sidebar')
+    },
     openSearch () {
       this.$store.commit('showHover', 'search')
     },

_assets/src/components/Sidebar.vue

@@ -18,7 +18,7 @@
     </div>
 
     <div v-for="plugin in plugins">
-      <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" class="action">
+      <button v-for="action in plugin.sidebar" @click="action.click" :aria-label="action.name" :title="action.name" :key="action.name" class="action">
         <i class="material-icons">{{ action.icon }}</i>
         <span>{{ action.name }}</span>
       </button>
@@ -48,11 +48,15 @@ export default {
   name: 'sidebar',
   data: () => {
     return {
-      plugins: [],
-      active: false
+      plugins: []
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    active () {
+      return this.$store.state.show === 'sidebar'
     }
   },
-  computed: mapState(['user']),
   mounted () {
     if (window.plugins !== undefined || window.plugins !== null) {
       this.plugins = window.plugins

_assets/src/css/mobile.css

@@ -14,14 +14,17 @@
 @media (max-width: 736px) {
   nav {
     top: 0;
-    z-index: 9999;
+    z-index: 99999;
     background: #fff;
     height: 100%;
     width: 13em;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    transition: .2s ease-in-out left;
+    transition: .1s ease left;
     left: -14em;
   }
+  nav.active {
+    left: 0;
+  }
   header .search-button,
   header>div:first-child>.action {
     display: inherit;