🎉 Toggle sidebar

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;
   }
 }

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;
 }

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 v-if="activeSidebar" class="sticky-inner inner-right">
-      <aside 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: {