From c3544076ba87976b491cb92459965ef6da4a19f8 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyasthomas@gmail.com>
Date: Mon, 2 Dec 2019 13:49:52 +0530
Subject: [PATCH] :tada: Toggle sidebar

---
 assets/css/styles.scss | 12 ++++++++----
 components/history.vue | 12 +-----------
 pages/index.vue        | 12 +++++++++---
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4f2a93777..88dcf2e09 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -2,7 +2,7 @@
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s;
 }
 
 .page-enter,
@@ -267,8 +267,9 @@ h3 {
     color: white;
     border-radius: 8px;
     padding: 8px 16px;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
+    box-shadow: 0 4px 24px rgba(black, 0.1);
   }
 
   .tooltip-arrow {
@@ -774,13 +775,13 @@ input[type="radio"]:checked + label + .tab {
 .inner-left {
   display: flex;
   order: 1;
-  margin-right: 16px;
 }
 
 .inner-right {
   display: flex;
   width: 30%;
   order: 2;
+  margin-left: 16px;
 }
 
 .bg-color {
@@ -839,6 +840,9 @@ input[type="radio"]:checked + label + .tab {
 
   .inner-left {
     order: 0;
-    margin-right: 0;
+  }
+
+  .inner-right {
+    margin-left: 0;
   }
 }
diff --git a/components/history.vue b/components/history.vue
index 512becdc3..02a439ea9 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -122,7 +122,7 @@
             />
           </li>
         </div>
-        <transition name="smooth">
+        <transition name="page" appear>
           <div v-if="showMore" class="show-on-large-screen">
             <li>
               <input
@@ -267,16 +267,6 @@
   }
 }
 
-.smooth-enter-active,
-.smooth-leave-active {
-  transition: all 0.2s;
-}
-
-.smooth-enter,
-.smooth-leave-to {
-  opacity: 0;
-}
-
 .stared {
   color: #f8e81c !important;
 }
diff --git a/pages/index.vue b/pages/index.vue
index 4e0f00ea1..7f1a3a19f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -560,6 +560,12 @@
               </ul>
             </pw-section>
           </div>
+          <div class="flex-wrap" style="display: flex; flex-grow: 1;">
+            <span></span>
+            <button class="icon" @click="activeSidebar = !activeSidebar" v-tooltip="{ content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar' }">
+              <i class="material-icons">{{activeSidebar ? 'chevron_right' : 'chevron_left'}}</i>
+            </button>
+          </div>
         </section>
 
         <pw-section
@@ -668,8 +674,7 @@
           </ul>
         </pw-section>
       </div>
-
-      <aside class="sticky-inner inner-right">
+      <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
@@ -910,7 +915,8 @@ export default {
       urlExcludes: {},
       responseBodyText: "",
       responseBodyType: "text",
-      responseBodyMaxLines: 16
+      responseBodyMaxLines: 16,
+      activeSidebar: true
     };
   },
   watch: {