Support for collapsing side menu

src/options/Menu.vue

@@ -1,5 +1,10 @@
 <template>
-  <ul class="menu">
+  <div class="menu-container" :class="{ collapsed: hidden }">
+    <div class="toggler" @click="hidden = !hidden">
+      <i class="fas" :class="'fa-chevron-' + (hidden ? 'right' : 'left')" />
+    </div>
+
+    <ul class="menu" v-if="!hidden">
       <li
         class="host"
         v-for="(host, hostname) in hosts"
@@ -23,6 +28,7 @@
       <li class="add" :class="{ selected: selectedTab === 'add' }" @click="$emit('select', 'add')"><i class="fas fa-plus" /> &nbsp; Add Device</li>
       <li class="config" :class="{ selected: selectedTab === 'config' }" @click="$emit('select', 'config')"><i class="fas fa-cog" /> &nbsp; Configuration</li>
     </ul>
+  </div>
 </template>
 
 <script>
@@ -33,6 +39,16 @@ export default {
     selectedTab: String,
     selectedHost: String,
     selectedHostOption: String,
+    show: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      hidden: !this.show,
+    };
   },
 
   computed: {
@@ -53,12 +69,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.menu {
+.menu-container {
-  background: rgba(0, 0, 0, 0.7);
+  position: relative;
-  color: white;
-  margin: 0;
-  padding: 0;
-  box-shadow: 1px 1px 1.5px 1px rgba(0, 0, 0, 0.5);
 
   @media screen and (max-width: 800px) {
     & {
@@ -78,6 +90,20 @@ export default {
     }
   }
 
+  &.collapsed {
+    width: 2em;
+  }
+}
+
+.menu {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  margin: 0;
+  padding: 0;
+  box-shadow: 1px 1px 1.5px 1px rgba(0, 0, 0, 0.5);
+
   li {
     display: block;
     cursor: pointer;
@@ -114,6 +140,22 @@ export default {
     }
   }
 }
+
+.toggler {
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - 0.5em);
+  font-size: 2em;
+  cursor: pointer;
+
+  .fa-chevron-right {
+    color: black;
+  }
+
+  .fa-chevron-left {
+    color: white;
+  }
+}
 </style>
 
 <!-- vim:sw=2:ts=2:et: -->