From a40d67138b6e0dd5ef52bfd1fedaf28fec5df1fc Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 17 Nov 2019 03:26:26 +0530
Subject: [PATCH] :art: Moved History & Collection section to sticky right nav
 (initial upload).

---
 assets/css/styles.scss |   45 +-
 components/history.vue |   24 +-
 pages/index.vue        | 1317 ++++++++++++++++++++--------------------
 3 files changed, 720 insertions(+), 666 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4a890ddbc..e6f3aa50c 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -78,7 +78,7 @@ a {
 
 header,
 footer {
-  &>div {
+  & > div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -127,7 +127,8 @@ footer {
   color: var(--ac-color);
 }
 
-.nav-first {
+.nav-first,
+.sticky-inner {
   display: flex;
   order: 1;
   flex-flow: column;
@@ -521,7 +522,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  &+label {
+  & + label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -540,7 +541,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked+label:before {
+  &:checked + label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -600,6 +601,10 @@ ol li {
   display: none;
 }
 
+.show-on-large-screen {
+  display: inline-flex;
+}
+
 #installPWA {
   display: none;
 }
@@ -717,7 +722,7 @@ div.tab {
   display: none;
 }
 
-input[type="radio"]+label {
+input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -730,11 +735,11 @@ input[type="radio"]+label {
   }
 }
 
-input[type="radio"]:checked+label {
+input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked+label+div.tab {
+input[type="radio"]:checked + label + div.tab {
   display: block;
 }
 
@@ -751,7 +756,28 @@ input[type="radio"]:checked+label+div.tab {
   color: inherit !important;
 }
 
+.page-columns {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+}
+
+.inner-left {
+  display: flex;
+  order: 1;
+}
+
+.inner-right {
+  display: flex;
+  width: 25%;
+  order: 2;
+}
+
 @media (max-width: $responsiveWidth) {
+  .content {
+    flex-flow: column;
+  }
+
   .columns {
     flex-flow: column;
   }
@@ -791,4 +817,9 @@ input[type="radio"]:checked+label+div.tab {
   .show-on-small-screen {
     display: inline-flex;
   }
+
+  .sticky-inner {
+    position: relative;
+    width: 100%;
+  }
 }
diff --git a/components/history.vue b/components/history.vue
index 89662a95e..8d101c156 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -11,7 +11,7 @@
       </li>
     </ul>
     <ul v-if="history.length !== 0" class="labels">
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button class="icon">
             <i class="material-icons">star_half</i>
@@ -64,7 +64,7 @@
           </ul>
         </li>
       </transition>
-      <div class="show-on-small-screen">
+      <div class="show-on-large-screen">
         <li>
           <button
             class="icon"
@@ -93,7 +93,7 @@
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               class="icon"
@@ -119,7 +119,7 @@
             </button>
           </li>
         </div>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="Label"
@@ -155,7 +155,7 @@
             >{{ entry.status }}</span
           >
         </li>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="URL"
@@ -176,7 +176,7 @@
           </li>
         </div>
         <transition name="smooth">
-          <div v-if="show" class="show-on-small-screen">
+          <div v-if="show" class="show-on-large-screen">
             <li>
               <input
                 aria-label="Duration"
@@ -197,7 +197,7 @@
             </li>
           </div>
         </transition>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <button
               v-tooltip="'Delete entry'"
@@ -302,6 +302,16 @@ label {
   color: #f8e81c !important;
 }
 
+ul,
+ol {
+  flex-direction: column;
+}
+
+ul li,
+ol li {
+  display: flex;
+}
+  
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
diff --git a/pages/index.vue b/pages/index.vue
index ecaa41970..b77be31da 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,696 +1,708 @@
 <template>
   <div class="page">
-    <pw-section
-      v-if="showPreRequestScript"
-      class="orange"
-      label="Pre-Request"
-      ref="preRequest"
-    >
-      <ul>
-        <li>
-          <div class="flex-wrap">
-            <label for="generatedCode">JavaScript Code</label>
-            <div>
-              <a
-                href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
-                target="_blank"
-                rel="noopener"
-              >
-                <button class="icon" v-tooltip="'Wiki'">
-                  <i class="material-icons">help</i>
-                </button>
-              </a>
-            </div>
-          </div>
-          <textarea
-            id="preRequestScript"
-            @keydown="formatRawParams"
-            rows="8"
-            v-model="preRequestScript"
-            spellcheck="false"
-            placeholder="pw.env.set('variable', 'value');"
-          ></textarea>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="blue" label="Request" ref="request">
-      <ul>
-        <li>
-          <label for="method">Method</label>
-          <select id="method" v-model="method" @change="methodChange">
-            <option>GET</option>
-            <option>HEAD</option>
-            <option>POST</option>
-            <option>PUT</option>
-            <option>DELETE</option>
-            <option>OPTIONS</option>
-            <option>PATCH</option>
-          </select>
-        </li>
-        <li>
-          <label for="url">URL</label>
-          <input
-            :class="{ error: !isValidURL }"
-            @keyup.enter="isValidURL ? sendRequest() : null"
-            id="url"
-            name="url"
-            type="url"
-            v-model="url"
-          />
-        </li>
-        <li>
-          <label for="path">Path</label>
-          <input
-            @keyup.enter="isValidURL ? sendRequest() : null"
-            id="path"
-            name="path"
-            v-model="path"
-            @input="pathInputHandler"
-          />
-        </li>
-        <li>
-          <label for="label">Label</label>
-          <input
-            id="label"
-            name="label"
-            type="text"
-            v-model="label"
-            placeholder="(optional)"
-            list="preLabels"
-          />
-          <datalist id="preLabels">
-            <option value="Login"></option>
-            <option value="Logout"></option>
-            <option value="Bug"></option>
-            <option value="Users"></option>
-          </datalist>
-        </li>
-        <li>
-          <label class="hide-on-small-screen" for="send">&nbsp;</label>
-          <button
-            :disabled="!isValidURL"
-            @click="sendRequest"
-            id="send"
-            ref="sendButton"
-          >
-            Send
-            <span id="hidden-message">Again</span>
-            <span>
-              <i class="material-icons">send</i>
-            </span>
-          </button>
-        </li>
-      </ul>
-      <div
-        class="blue"
-        label="Request Body"
-        v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'"
-      >
-        <ul>
-          <li>
-            <label for="contentType">Content Type</label>
-            <autocomplete
-              :source="validContentTypes"
-              :spellcheck="false"
-              v-model="contentType"
-              >Content Type</autocomplete
-            >
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <span>
-                <pw-toggle :on="rawInput" @change="rawInput = $event"
-                  >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
-                >
-              </span>
-              <div>
-                <label for="payload">
-                  <button
-                    class="icon"
-                    @click="$refs.payload.click()"
-                    v-tooltip="'Upload file'"
+    <div class="content">
+      <div class="page-columns inner-left">
+        <pw-section
+          v-if="showPreRequestScript"
+          class="orange"
+          label="Pre-Request"
+          ref="preRequest"
+        >
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="generatedCode">JavaScript Code</label>
+                <div>
+                  <a
+                    href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
+                    target="_blank"
+                    rel="noopener"
                   >
-                    <i class="material-icons">attach_file</i>
-                  </button>
-                </label>
-                <input
-                  ref="payload"
-                  name="payload"
-                  type="file"
-                  @change="uploadPayload"
-                />
+                    <button class="icon" v-tooltip="'Wiki'">
+                      <i class="material-icons">help</i>
+                    </button>
+                  </a>
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-        <div v-if="!rawInput">
-          <ul>
-            <li>
-              <label for="reqParamList">Parameter List</label>
               <textarea
-                id="reqParamList"
-                readonly
-                v-textarea-auto-height="rawRequestBody"
-                v-model="rawRequestBody"
-                placeholder="(add at least one parameter)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(param, index) in bodyParams" :key="index">
-            <li>
-              <input
-                :placeholder="'key ' + (index + 1)"
-                :name="'bparam' + index"
-                :value="param.key"
-                @change="
-                  $store.commit('setKeyBodyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (index + 1)"
-                :id="'bvalue' + index"
-                :name="'bvalue' + index"
-                :value="param.value"
-                @change="
-                  $store.commit('setValueBodyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeRequestBodyParam(index)"
-                  id="delParam"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button
-                class="icon"
-                @click="addRequestBodyParam"
-                name="addrequest"
-              >
-                <i class="material-icons">add</i>
-                <span>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-        <div v-else>
-          <ul>
-            <li>
-              <label for="rawBody">Raw Request Body</label>
-              <textarea
-                id="rawBody"
+                id="preRequestScript"
                 @keydown="formatRawParams"
                 rows="8"
-                v-model="rawParams"
+                v-model="preRequestScript"
+                spellcheck="false"
+                placeholder="pw.env.set('variable', 'value');"
               ></textarea>
             </li>
           </ul>
-        </div>
-      </div>
-      <div class="flex-wrap">
-        <div style="text-align: center;">
-          <button
-            class="icon"
-            id="show-modal"
-            @click="showModal = true"
-            v-tooltip.bottom="'Import cURL'"
-          >
-            <i class="material-icons">import_export</i>
-          </button>
-          <button
-            class="icon"
-            id="code"
-            v-on:click="isHidden = !isHidden"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
-          >
-            <i class="material-icons">flash_on</i>
-          </button>
-          <button
-            :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
-            id="preRequestScriptButton"
-            v-tooltip.bottom="{
-              content: !showPreRequestScript
-                ? 'Show Pre-Request Script'
-                : 'Hide Pre-Request Script'
-            }"
-            @click="showPreRequestScript = !showPreRequestScript"
-          >
-            <i
-              class="material-icons"
-              :class="showPreRequestScript"
-              v-if="!showPreRequestScript"
-              >code</i
-            >
-            <i class="material-icons" :class="showPreRequestScript" v-else
-              >close</i
-            >
-          </button>
-        </div>
-        <div style="text-align: center;">
-          <button
-            class="icon"
-            @click="copyRequest"
-            id="copyRequest"
-            ref="copyRequest"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="'Copy Request URL'"
-          >
-            <i class="material-icons">file_copy</i>
-          </button>
+        </pw-section>
 
-          <button
-            class="icon"
-            @click="saveRequest"
-            id="saveRequest"
-            ref="saveRequest"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="'Save to Collections'"
-          >
-            <i class="material-icons">save</i>
-          </button>
-          <button
-            class="icon"
-            @click="clearContent('', $event)"
-            v-tooltip.bottom="'Clear All'"
-            ref="clearAll"
-          >
-            <i class="material-icons">clear_all</i>
-          </button>
-        </div>
-      </div>
-    </pw-section>
-
-    <br />
-
-    <section id="options">
-      <input id="tab-one" type="radio" name="grp" checked="checked" />
-      <label for="tab-one">Authentication</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="cyan" label="Authentication" ref="authentication">
+        <pw-section class="blue" label="Request" ref="request">
           <ul>
             <li>
-              <div class="flex-wrap">
-                <label for="auth">Authentication Type</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('auth', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <select id="auth" v-model="auth">
-                <option>None</option>
-                <option>Basic</option>
-                <option>Bearer Token</option>
+              <label for="method">Method</label>
+              <select id="method" v-model="method" @change="methodChange">
+                <option>GET</option>
+                <option>HEAD</option>
+                <option>POST</option>
+                <option>PUT</option>
+                <option>DELETE</option>
+                <option>OPTIONS</option>
+                <option>PATCH</option>
               </select>
             </li>
+            <li>
+              <label for="url">URL</label>
+              <input
+                :class="{ error: !isValidURL }"
+                @keyup.enter="isValidURL ? sendRequest() : null"
+                id="url"
+                name="url"
+                type="url"
+                v-model="url"
+              />
+            </li>
+            <li>
+              <label for="path">Path</label>
+              <input
+                @keyup.enter="isValidURL ? sendRequest() : null"
+                id="path"
+                name="path"
+                v-model="path"
+                @input="pathInputHandler"
+              />
+            </li>
+            <li>
+              <label for="label">Label</label>
+              <input
+                id="label"
+                name="label"
+                type="text"
+                v-model="label"
+                placeholder="(optional)"
+                list="preLabels"
+              />
+              <datalist id="preLabels">
+                <option value="Login"></option>
+                <option value="Logout"></option>
+                <option value="Bug"></option>
+                <option value="Users"></option>
+              </datalist>
+            </li>
+            <li>
+              <label class="hide-on-small-screen" for="send">&nbsp;</label>
+              <button
+                :disabled="!isValidURL"
+                @click="sendRequest"
+                id="send"
+                ref="sendButton"
+              >
+                Send
+                <span id="hidden-message">Again</span>
+                <span>
+                  <i class="material-icons">send</i>
+                </span>
+              </button>
+            </li>
           </ul>
-          <ul v-if="auth === 'Basic'">
-            <li>
-              <input
-                placeholder="User"
-                name="http_basic_user"
-                v-model="httpUser"
-              />
-            </li>
-            <li>
-              <input
-                placeholder="Password"
-                name="http_basic_passwd"
-                :type="passwordFieldType"
-                v-model="httpPassword"
-              />
-            </li>
-            <div>
+          <div
+            class="blue"
+            label="Request Body"
+            v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'"
+          >
+            <ul>
               <li>
-                <button
-                  class="icon"
-                  id="switchVisibility"
-                  ref="switchVisibility"
-                  @click="switchVisibility"
+                <label for="contentType">Content Type</label>
+                <autocomplete
+                  :source="validContentTypes"
+                  :spellcheck="false"
+                  v-model="contentType"
+                  >Content Type</autocomplete
                 >
-                  <i class="material-icons" v-if="passwordFieldType === 'text'"
-                    >visibility</i
-                  >
-                  <i class="material-icons" v-if="passwordFieldType !== 'text'"
-                    >visibility_off</i
-                  >
-                </button>
               </li>
+            </ul>
+            <ul>
+              <li>
+                <div class="flex-wrap">
+                  <span>
+                    <pw-toggle :on="rawInput" @change="rawInput = $event"
+                      >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                    >
+                  </span>
+                  <div>
+                    <label for="payload">
+                      <button
+                        class="icon"
+                        @click="$refs.payload.click()"
+                        v-tooltip="'Upload file'"
+                      >
+                        <i class="material-icons">attach_file</i>
+                      </button>
+                    </label>
+                    <input
+                      ref="payload"
+                      name="payload"
+                      type="file"
+                      @change="uploadPayload"
+                    />
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <div v-if="!rawInput">
+              <ul>
+                <li>
+                  <label for="reqParamList">Parameter List</label>
+                  <textarea
+                    id="reqParamList"
+                    readonly
+                    v-textarea-auto-height="rawRequestBody"
+                    v-model="rawRequestBody"
+                    placeholder="(add at least one parameter)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(param, index) in bodyParams" :key="index">
+                <li>
+                  <input
+                    :placeholder="'key ' + (index + 1)"
+                    :name="'bparam' + index"
+                    :value="param.key"
+                    @change="
+                      $store.commit('setKeyBodyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (index + 1)"
+                    :id="'bvalue' + index"
+                    :name="'bvalue' + index"
+                    :value="param.value"
+                    @change="
+                      $store.commit('setValueBodyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <button
+                      class="icon"
+                      @click="removeRequestBodyParam(index)"
+                      id="delParam"
+                    >
+                      <i class="material-icons">delete</i>
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <button
+                    class="icon"
+                    @click="addRequestBodyParam"
+                    name="addrequest"
+                  >
+                    <i class="material-icons">add</i>
+                    <span>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div v-else>
+              <ul>
+                <li>
+                  <label for="rawBody">Raw Request Body</label>
+                  <textarea
+                    id="rawBody"
+                    @keydown="formatRawParams"
+                    rows="8"
+                    v-model="rawParams"
+                  ></textarea>
+                </li>
+              </ul>
             </div>
-          </ul>
-          <ul v-else-if="auth === 'Bearer Token'">
-            <li>
-              <input
-                placeholder="Token"
-                name="bearer_token"
-                v-model="bearerToken"
-              />
-            </li>
-          </ul>
-          <div class="flex-wrap">
-            <pw-toggle
-              :on="!urlExcludes.auth"
-              @change="setExclude('auth', !$event)"
-              >Include in URL</pw-toggle
-            >
           </div>
-        </pw-section>
-      </div>
-      <input id="tab-two" type="radio" name="grp" />
-      <label for="tab-two">Headers</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="orange" label="Headers" ref="headers">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="headerList">Header List</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('headers', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <textarea
-                id="headerList"
-                readonly
-                v-textarea-auto-height="headerString"
-                v-model="headerString"
-                placeholder="(add at least one header)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(header, index) in headers" :key="index">
-            <li>
-              <input
-                :placeholder="'header ' + (index + 1)"
-                :name="'header' + index"
-                :value="header.key"
-                @change="
-                  $store.commit('setKeyHeader', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (index + 1)"
-                :name="'value' + index"
-                :value="header.value"
-                @change="
-                  $store.commit('setValueHeader', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeRequestHeader(index)"
-                  id="header"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addRequestHeader">
-                <i class="material-icons">add</i>
-                <span>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </pw-section>
-      </div>
-      <input id="tab-three" type="radio" name="grp" />
-      <label for="tab-three">Parameters</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="pink" label="Parameters" ref="parameters">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="paramList">Parameter List</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('parameters', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <textarea
-                id="paramList"
-                readonly
-                v-textarea-auto-height="queryString"
-                v-model="queryString"
-                placeholder="(add at least one parameter)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(param, index) in params" :key="index">
-            <li>
-              <input
-                :placeholder="'parameter ' + (index + 1)"
-                :name="'param' + index"
-                :value="param.key"
-                @change="
-                  $store.commit('setKeyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (index + 1)"
-                :name="'value' + index"
-                :value="param.value"
-                @change="
-                  $store.commit('setValueParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeRequestParam(index)"
-                  id="param"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addRequestParam">
-                <i class="material-icons">add</i>
-                <span>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </pw-section>
-      </div>
-    </section>
-
-    <br />
-
-    <pw-section class="purple" id="response" label="Response" ref="response">
-      <ul>
-        <li>
-          <label for="status">status</label>
-          <input
-            :class="statusCategory ? statusCategory.className : ''"
-            :value="response.status || '(waiting to send request)'"
-            ref="status"
-            id="status"
-            name="status"
-            readonly
-            type="text"
-          />
-        </li>
-      </ul>
-      <ul v-for="(value, key) in response.headers" :key="key">
-        <li>
-          <label :for="key">{{ key }}</label>
-          <input :id="key" :value="value" :name="key" readonly />
-        </li>
-      </ul>
-      <ul v-if="response.body">
-        <li>
           <div class="flex-wrap">
-            <label for="body">response</label>
-            <div>
+            <div style="text-align: center;">
               <button
                 class="icon"
-                @click="copyResponse"
-                ref="copyResponse"
-                v-if="response.body"
-                v-tooltip="'Copy response'"
+                id="show-modal"
+                @click="showModal = true"
+                v-tooltip.bottom="'Import cURL'"
+              >
+                <i class="material-icons">import_export</i>
+              </button>
+              <button
+                class="icon"
+                id="code"
+                v-on:click="isHidden = !isHidden"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
+              >
+                <i class="material-icons">flash_on</i>
+              </button>
+              <button
+                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                id="preRequestScriptButton"
+                v-tooltip.bottom="{
+                  content: !showPreRequestScript
+                    ? 'Show Pre-Request Script'
+                    : 'Hide Pre-Request Script'
+                }"
+                @click="showPreRequestScript = !showPreRequestScript"
+              >
+                <i
+                  class="material-icons"
+                  :class="showPreRequestScript"
+                  v-if="!showPreRequestScript"
+                  >code</i
+                >
+                <i class="material-icons" :class="showPreRequestScript" v-else
+                  >close</i
+                >
+              </button>
+            </div>
+            <div style="text-align: center;">
+              <button
+                class="icon"
+                @click="copyRequest"
+                id="copyRequest"
+                ref="copyRequest"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="'Copy Request URL'"
               >
                 <i class="material-icons">file_copy</i>
               </button>
+
               <button
                 class="icon"
-                @click="downloadResponse"
-                ref="downloadResponse"
-                v-if="response.body"
-                v-tooltip="'Download file'"
+                @click="saveRequest"
+                id="saveRequest"
+                ref="saveRequest"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="'Save to Collections'"
               >
-                <i class="material-icons">get_app</i>
+                <i class="material-icons">save</i>
+              </button>
+              <button
+                class="icon"
+                @click="clearContent('', $event)"
+                v-tooltip.bottom="'Clear All'"
+                ref="clearAll"
+              >
+                <i class="material-icons">clear_all</i>
               </button>
             </div>
           </div>
-          <div id="response-details-wrapper">
-            <ResponseBody
-              :value="responseBodyText"
-              :lang="responseBodyType"
-              :options="{
-                maxLines: '16',
-                minLines: '16',
-                fontSize: '16px',
-                autoScrollEditorIntoView: true,
-                readOnly: true,
-                showPrintMargin: false,
-                useWorker: false
-              }"
-            />
-            <iframe
-              :class="{ hidden: !previewEnabled }"
-              class="covers-response"
-              ref="previewFrame"
-              src="about:blank"
-            ></iframe>
+        </pw-section>
+
+        <br />
+
+        <section id="options">
+          <input id="tab-one" type="radio" name="options" checked="checked" />
+          <label for="tab-one">Authentication</label>
+          <div class="tab">
+            <br />
+
+            <pw-section class="cyan" label="Authentication" ref="authentication">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="auth">Authentication Type</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('auth', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <select id="auth" v-model="auth">
+                    <option>None</option>
+                    <option>Basic</option>
+                    <option>Bearer Token</option>
+                  </select>
+                </li>
+              </ul>
+              <ul v-if="auth === 'Basic'">
+                <li>
+                  <input
+                    placeholder="User"
+                    name="http_basic_user"
+                    v-model="httpUser"
+                  />
+                </li>
+                <li>
+                  <input
+                    placeholder="Password"
+                    name="http_basic_passwd"
+                    :type="passwordFieldType"
+                    v-model="httpPassword"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <button
+                      class="icon"
+                      id="switchVisibility"
+                      ref="switchVisibility"
+                      @click="switchVisibility"
+                    >
+                      <i class="material-icons" v-if="passwordFieldType === 'text'"
+                        >visibility</i
+                      >
+                      <i class="material-icons" v-if="passwordFieldType !== 'text'"
+                        >visibility_off</i
+                      >
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul v-else-if="auth === 'Bearer Token'">
+                <li>
+                  <input
+                    placeholder="Token"
+                    name="bearer_token"
+                    v-model="bearerToken"
+                  />
+                </li>
+              </ul>
+              <div class="flex-wrap">
+                <pw-toggle
+                  :on="!urlExcludes.auth"
+                  @change="setExclude('auth', !$event)"
+                  >Include in URL</pw-toggle
+                >
+              </div>
+            </pw-section>
           </div>
-          <div
-            class="align-right"
-            v-if="response.body && responseType === 'text/html'"
-          >
-            <button class="icon" @click.prevent="togglePreview">
-              <i class="material-icons" v-if="!previewEnabled">visibility</i>
-              <i class="material-icons" v-else>visibility_off</i>
-              <span>{{
-                previewEnabled ? "Hide Preview" : "Preview HTML"
-              }}</span>
-            </button>
+          <input id="tab-two" type="radio" name="options" />
+          <label for="tab-two">Headers</label>
+          <div class="tab">
+            <br />
+
+            <pw-section class="orange" label="Headers" ref="headers">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="headerList">Header List</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('headers', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    id="headerList"
+                    readonly
+                    v-textarea-auto-height="headerString"
+                    v-model="headerString"
+                    placeholder="(add at least one header)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(header, index) in headers" :key="index">
+                <li>
+                  <input
+                    :placeholder="'header ' + (index + 1)"
+                    :name="'header' + index"
+                    :value="header.key"
+                    @change="
+                      $store.commit('setKeyHeader', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (index + 1)"
+                    :name="'value' + index"
+                    :value="header.value"
+                    @change="
+                      $store.commit('setValueHeader', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <button
+                      class="icon"
+                      @click="removeRequestHeader(index)"
+                      id="header"
+                    >
+                      <i class="material-icons">delete</i>
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <button class="icon" @click="addRequestHeader">
+                    <i class="material-icons">add</i>
+                    <span>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </pw-section>
           </div>
-        </li>
-      </ul>
-    </pw-section>
+          <input id="tab-three" type="radio" name="options" />
+          <label for="tab-three">Parameters</label>
+          <div class="tab">
+            <br />
 
-    <br />
+            <pw-section class="pink" label="Parameters" ref="parameters">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="paramList">Parameter List</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('parameters', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    id="paramList"
+                    readonly
+                    v-textarea-auto-height="queryString"
+                    v-model="queryString"
+                    placeholder="(add at least one parameter)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(param, index) in params" :key="index">
+                <li>
+                  <input
+                    :placeholder="'parameter ' + (index + 1)"
+                    :name="'param' + index"
+                    :value="param.key"
+                    @change="
+                      $store.commit('setKeyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (index + 1)"
+                    :name="'value' + index"
+                    :value="param.value"
+                    @change="
+                      $store.commit('setValueParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                  />
+                </li>
+                <div>
+                  <li>
+                    <button
+                      class="icon"
+                      @click="removeRequestParam(index)"
+                      id="param"
+                    >
+                      <i class="material-icons">delete</i>
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <button class="icon" @click="addRequestParam">
+                    <i class="material-icons">add</i>
+                    <span>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </pw-section>
+          </div>
+        </section>
 
-    <pw-section class="yellow" label="Collections" ref="collections">
-      <collections />
-    </pw-section>
+        <br />
 
-    <br />
-
-    <history @useHistory="handleUseHistory" ref="historyComponent"></history>
-
-    <save-request-as
-      v-bind:show="showRequestModal"
-      v-on:hide-model="hideRequestModal"
-      v-bind:editing-request="editRequest"
-    ></save-request-as>
-
-    <pw-modal v-if="showModal" @close="showModal = false">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <h3 class="title">Import cURL</h3>
-              <div>
-                <button class="icon" @click="showModal = false">
-                  <i class="material-icons">close</i>
+        <pw-section class="purple" id="response" label="Response" ref="response">
+          <ul>
+            <li>
+              <label for="status">status</label>
+              <input
+                :class="statusCategory ? statusCategory.className : ''"
+                :value="response.status || '(waiting to send request)'"
+                ref="status"
+                id="status"
+                name="status"
+                readonly
+                type="text"
+              />
+            </li>
+          </ul>
+          <ul v-for="(value, key) in response.headers" :key="key">
+            <li>
+              <label :for="key">{{ key }}</label>
+              <input :id="key" :value="value" :name="key" readonly />
+            </li>
+          </ul>
+          <ul v-if="response.body">
+            <li>
+              <div class="flex-wrap">
+                <label for="body">response</label>
+                <div>
+                  <button
+                    class="icon"
+                    @click="copyResponse"
+                    ref="copyResponse"
+                    v-if="response.body"
+                    v-tooltip="'Copy response'"
+                  >
+                    <i class="material-icons">file_copy</i>
+                  </button>
+                  <button
+                    class="icon"
+                    @click="downloadResponse"
+                    ref="downloadResponse"
+                    v-if="response.body"
+                    v-tooltip="'Download file'"
+                  >
+                    <i class="material-icons">get_app</i>
+                  </button>
+                </div>
+              </div>
+              <div id="response-details-wrapper">
+                <ResponseBody
+                  :value="responseBodyText"
+                  :lang="responseBodyType"
+                  :options="{
+                    maxLines: '16',
+                    minLines: '16',
+                    fontSize: '16px',
+                    autoScrollEditorIntoView: true,
+                    readOnly: true,
+                    showPrintMargin: false,
+                    useWorker: false
+                  }"
+                />
+                <iframe
+                  :class="{ hidden: !previewEnabled }"
+                  class="covers-response"
+                  ref="previewFrame"
+                  src="about:blank"
+                ></iframe>
+              </div>
+              <div
+                class="align-right"
+                v-if="response.body && responseType === 'text/html'"
+              >
+                <button class="icon" @click.prevent="togglePreview">
+                  <i class="material-icons" v-if="!previewEnabled">visibility</i>
+                  <i class="material-icons" v-else>visibility_off</i>
+                  <span>{{
+                    previewEnabled ? "Hide Preview" : "Preview HTML"
+                  }}</span>
                 </button>
               </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div slot="body">
-        <ul>
-          <li>
-            <textarea
-              id="import-text"
-              autofocus
-              rows="8"
-              placeholder="Enter cURL"
-            ></textarea>
-          </li>
-        </ul>
-      </div>
-      <div slot="footer">
-        <ul>
-          <li>
-            <button class="icon" @click="handleImport">
-              <i class="material-icons">get_app</i>
-              <span>Import</span>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </pw-modal>
+            </li>
+          </ul>
+        </pw-section>
 
-    <pw-modal v-if="!isHidden" @close="isHidden = true">
+        <br />
+      </div>
+
+      <aside class="sticky-inner inner-right">
+        <section>
+          <input id="collection-tab" type="radio" name="side" checked="checked" />
+          <label for="collection-tab">Collections</label>
+          <div class="tab">
+            <pw-section class="yellow" label="Collections" ref="collections">
+          <collections />
+          </pw-section>
+          </div>
+          <input id="history-tab" type="radio" name="side" />
+          <label for="history-tab">History</label>
+          <div class="tab">
+            <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+          </div>
+        </section>
+      </aside>
+
+      <save-request-as
+        v-bind:show="showRequestModal"
+        v-on:hide-model="hideRequestModal"
+        v-bind:editing-request="editRequest"
+      ></save-request-as>
+
+      <pw-modal v-if="showModal" @close="showModal = false">
+        <div slot="header">
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <h3 class="title">Import cURL</h3>
+                <div>
+                  <button class="icon" @click="showModal = false">
+                    <i class="material-icons">close</i>
+                  </button>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div slot="body">
+          <ul>
+            <li>
+              <textarea
+                id="import-text"
+                autofocus
+                rows="8"
+                placeholder="Enter cURL"
+              ></textarea>
+            </li>
+          </ul>
+        </div>
+        <div slot="footer">
+          <ul>
+            <li>
+              <button class="icon" @click="handleImport">
+                <i class="material-icons">get_app</i>
+                <span>Import</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </pw-modal>
+
+      <pw-modal v-if="!isHidden" @close="isHidden = true">
       <div slot="header">
         <ul>
           <li>
@@ -744,6 +756,7 @@
       </div>
       <div slot="footer"></div>
     </pw-modal>
+    </div>
   </div>
 </template>
 <script>