From c5b84959c03f5809921efd934b6f229d9f9df6bc Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 14 Feb 2020 10:48:03 -0800
Subject: [PATCH] Collapse menu (#274)

* Tries to implement collapse menu

* Fixes using hiding

* Fixes tests

* Updates styles

* Adds better styles for collapse

* Fixes tests
---
 assets/App.spec.js                    |  2 +-
 assets/App.vue                        | 40 +++++++++++++++++++++++----
 assets/__snapshots__/App.spec.js.snap | 14 ++++++++++
 assets/components/SideMenu.vue        |  2 +-
 assets/index.html                     |  2 +-
 assets/styles.scss                    | 26 +++++++++++++----
 6 files changed, 73 insertions(+), 13 deletions(-)

diff --git a/assets/App.spec.js b/assets/App.spec.js
index eec6ebf3..b9f332d2 100644
--- a/assets/App.spec.js
+++ b/assets/App.spec.js
@@ -8,7 +8,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true };
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true, "ion-icon": true };
   let store;
 
   beforeEach(() => {
diff --git a/assets/App.vue b/assets/App.vue
index 4e5ed2c0..fc14ba97 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -1,8 +1,9 @@
 <template lang="html">
   <main>
     <mobile-menu v-if="isMobile"></mobile-menu>
-    <splitpanes @resized="onResize($event)">
-      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile">
+
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="settings.menuWidth" v-if="!isMobile" v-show="!collapseNav">
         <side-menu></side-menu>
       </pane>
       <pane min-size="10">
@@ -22,6 +23,17 @@
         </splitpanes>
       </pane>
     </splitpanes>
+    <button
+      @click="collapseNav = !collapseNav"
+      class="button is-small is-rounded is-settings-control"
+      :class="{ collapsed: collapseNav }"
+      id="hide-nav"
+      v-if="!isMobile"
+    >
+      <span class="icon">
+        <ion-icon :name="collapseNav ? 'arrow-dropright' : 'arrow-dropleft'" size="large"></ion-icon>
+      </span>
+    </button>
   </main>
 </template>
 
@@ -51,7 +63,7 @@ export default {
   data() {
     return {
       title: "",
-      showNav: false
+      collapseNav: false
     };
   },
   metaInfo() {
@@ -68,6 +80,7 @@ export default {
     if (this.hasSmallerScrollbars) {
       document.documentElement.classList.add("has-custom-scrollbars");
     }
+    this.menuWidth = this.settings.menuWidth;
   },
   watch: {
     hasSmallerScrollbars(newValue, oldValue) {
@@ -90,9 +103,10 @@ export default {
       removeActiveContainer: "REMOVE_ACTIVE_CONTAINER",
       updateSetting: "UPDATE_SETTING"
     }),
-    onResize(e) {
+    onResized(e) {
       if (e.length == 2) {
-        this.updateSetting({ menuWidth: Math.min(90, e[0].size) });
+        const menuWidth = e[0].size;
+        this.updateSetting({ menuWidth });
       }
     }
   }
@@ -115,4 +129,20 @@ export default {
 .has-min-height {
   min-height: 100vh;
 }
+
+#hide-nav {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  &.collapsed {
+    left: -40px;
+    width: 60px;
+    padding-left: 40px;
+    background: rgba(0, 0, 0, 0.95);
+
+    &:hover {
+      left: -25px;
+    }
+  }
+}
 </style>
diff --git a/assets/__snapshots__/App.spec.js.snap b/assets/__snapshots__/App.spec.js.snap
index 987f260d..1f49b064 100644
--- a/assets/__snapshots__/App.spec.js.snap
+++ b/assets/__snapshots__/App.spec.js.snap
@@ -37,5 +37,19 @@ exports[`<App /> renders correctly 1`] = `
       </splitpanes-stub>
     </pane-stub>
   </splitpanes-stub>
+   
+  <button
+    class="button is-small is-rounded is-settings-control"
+    id="hide-nav"
+  >
+    <span
+      class="icon"
+    >
+      <ion-icon-stub
+        name="arrow-dropleft"
+        size="large"
+      />
+    </span>
+  </button>
 </main>
 `;
diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue
index e18d87b6..2bd27272 100644
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -8,7 +8,7 @@
         <router-link
           :to="{ name: 'settings' }"
           active-class="is-active"
-          class="button is-small is-primary is-rounded is-inverted is-outlined "
+          class="button is-small is-rounded is-settings-control"
         >
           <span class="icon"><ion-icon name="settings" size="large"></ion-icon></span>
         </router-link>
diff --git a/assets/index.html b/assets/index.html
index b60284c1..a211808d 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -16,7 +16,7 @@
     <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
   </head>
 
-  <body class="is-dark">
+  <body>
     <div id="app"></div>
     <script src="main.js"></script>
   </body>
diff --git a/assets/styles.scss b/assets/styles.scss
index 79bec6c4..ce9958d0 100644
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -9,13 +9,10 @@ $menu-item-color: hsl(0, 6%, 87%);
 @import "~buefy/src/scss/components/_dropdown";
 @import "~buefy/src/scss/components/_switch";
 
-.is-dark {
-  color: #ddd;
-  background-color: #111;
-}
-
 body {
   font-family: "Roboto", sans-serif;
+  color: #ddd;
+  background-color: #111;
 }
 
 h1.title {
@@ -56,3 +53,22 @@ html.has-custom-scrollbars {
     scrollbar-width: thin;
   }
 }
+
+.is-settings-control {
+  
+  background: rgba(0, 0, 0, 0.4);
+  color: #fff;
+  border-color: transparent;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  &:hover {
+    border-color: rgb(255, 221, 87) !important;
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: #fff !important;
+  }
+
+  &:focus {
+    box-shadow: none !important;
+    color: unset;
+    border-color: transparent;
+  }
+}