fix: collapse inactive menus

src/popup/style.css

@@ -7,7 +7,7 @@ html {
   font: 14px menu;
 }
 body {
-  min-width: 300px;
+  min-width: 20em;
   padding: 1em;
   font-size: 1em;
 }
@@ -23,7 +23,7 @@ svg path {
 .logo {
   text-align: center;
   img {
-    width: 6em;
+    width: 4em;
   }
   &.disabled > img {
     opacity: .5;
@@ -36,6 +36,9 @@ svg path {
     cursor: pointer;
     text-align: center;
     padding: .5em 2em;
+    .submenu > & {
+      text-align: left;
+    }
     &.disabled {
       color: gray;
       &:hover {
@@ -67,11 +70,8 @@ svg path {
 }
 .submenu {
   min-height: 4em;
-  max-height: 12em;
+  max-height: 18em;
   margin-left: 2em;
   overflow-y: auto;
   border-top: 1px dashed #ddd;
-  .menu-scripts > & {
-    max-height: 20em;
-  }
 }

src/popup/views/app/index.html

@@ -12,8 +12,8 @@
       <span v-text="i18n('menuDashboard')"></span>
     </div>
   </div>
-  <div class="menu menu-domains" v-show="domains.length" :class="{collapse:collapse.domains}" @click="collapse.domains=!collapse.domains">
-    <div class="menu-item">
+  <div class="menu menu-domains" v-show="domains.length" :class="{collapse:activeMenu!=='domains'}">
+    <div class="menu-item" @click="toggleMenu('domains')">
       <icon name="search"></icon>
       <icon name="more" class="icon-right"></icon>
       <span v-text="i18n('menuFindScripts')"></span>
@@ -24,8 +24,8 @@
       </div>
     </div>
   </div>
-  <div class="menu menu-commands" v-show="commands.length" :class="{collapse:collapse.commands}" @click="collapse.commands=!collapse.commands">
-    <div class="menu-item">
+  <div class="menu menu-commands" v-show="commands.length" :class="{collapse:activeMenu!=='commands'}">
+    <div class="menu-item" @click="toggleMenu('commands')">
       <icon name="more" class="icon-right"></icon>
       <span v-text="i18n('menuCommands')"></span>
     </div>
@@ -35,8 +35,8 @@
       </div>
     </div>
   </div>
-  <div class="menu menu-scripts" v-show="scripts.length" :class="{collapse:collapse.scripts}" @click="collapse.scripts=!collapse.scripts">
-    <div class="menu-item">
+  <div class="menu menu-scripts" v-show="scripts.length" :class="{collapse:activeMenu!=='scripts'}">
+    <div class="menu-item" @click="toggleMenu('scripts')">
       <icon name="more" class="icon-right"></icon>
       <span v-text="i18n('menuMatchedScripts')"></span>
     </div>

src/popup/views/app/index.js

@@ -20,6 +20,7 @@ module.exports = {
   data: function () {
     return {
       options: options,
+      activeMenu: 'scripts',
       store: utils.store,
       collapse: {
         domains: true,
@@ -55,6 +56,9 @@ module.exports = {
     },
   },
   methods: {
+    toggleMenu: function (name) {
+      this.activeMenu = this.activeMenu === name ? null : name;
+    },
     getSymbolCheck: function (bool) {
       return bool ? 'check' : 'remove';
     },