From b0c000b8059f945db136aa1e7ae6477c4e9bb420 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Tue, 30 Jun 2020 18:19:51 +0200
Subject: [PATCH] Support for collapsing side menu

---
 src/options/Menu.vue | 100 ++++++++++++++++++++++++++++++-------------
 1 file changed, 71 insertions(+), 29 deletions(-)

diff --git a/src/options/Menu.vue b/src/options/Menu.vue
index 2a177ad..1a409bd 100644
--- a/src/options/Menu.vue
+++ b/src/options/Menu.vue
@@ -1,28 +1,34 @@
 <template>
-  <ul class="menu">
-    <li
-      class="host"
-      v-for="(host, hostname) in hosts"
-      :key="hostname"
-      :class="{ selected: hostname === selectedHost }"
-      @click="$emit('select', 'host', hostname, hostname === selectedHost ? null : selectedHostOption)"
-    >
-      <i class="fas fa-hdd" /> &nbsp; {{ host.name }}
-      <ul class="host-menu" v-if="hostname === selectedHost">
-        <li
-          v-for="(option, optionName) in hostOptions"
-          :key="optionName"
-          :class="{ selected: selectedHostOption === optionName }"
-          @click.stop="$emit('select', 'host', hostname, optionName)"
-        >
-          <i :class="option.iconClass" /> &nbsp; {{ option.displayName }}
-        </li>
-      </ul>
-    </li>
+  <div class="menu-container" :class="{ collapsed: hidden }">
+    <div class="toggler" @click="hidden = !hidden">
+      <i class="fas" :class="'fa-chevron-' + (hidden ? 'right' : 'left')" />
+    </div>
 
-    <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>
+    <ul class="menu" v-if="!hidden">
+      <li
+        class="host"
+        v-for="(host, hostname) in hosts"
+        :key="hostname"
+        :class="{ selected: hostname === selectedHost }"
+        @click="$emit('select', 'host', hostname, hostname === selectedHost ? null : selectedHostOption)"
+      >
+        <i class="fas fa-hdd" /> &nbsp; {{ host.name }}
+        <ul class="host-menu" v-if="hostname === selectedHost">
+          <li
+            v-for="(option, optionName) in hostOptions"
+            :key="optionName"
+            :class="{ selected: selectedHostOption === optionName }"
+            @click.stop="$emit('select', 'host', hostname, optionName)"
+          >
+            <i :class="option.iconClass" /> &nbsp; {{ option.displayName }}
+          </li>
+        </ul>
+      </li>
+
+      <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 {
-  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);
+.menu-container {
+  position: relative;
 
   @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: -->