feat: support to move sidebar to left - fixed #1933

packages/hoppscotch-app/components/app/Footer.vue

@@ -4,10 +4,11 @@
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+          :title="EXPAND_NAVIGATION ? $t('hide.sidebar') : $t('show.sidebar')"
           svg="sidebar"
-          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
-          @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
+          class="transform"
+          :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
+          @click.native="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -133,14 +134,21 @@
           :class="{ 'rotate-90': !COLUMN_LAYOUT }"
           @click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
         />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
-          svg="sidebar"
-          class="transform rotate-180"
-          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
-          @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
-        />
+        <span
+          class="transform transition"
+          :class="{
+            'rotate-180': SIDEBAR_ON_LEFT,
+          }"
+        >
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+            svg="sidebar"
+            class="transform"
+            :class="{ 'rotate-180': !SIDEBAR }"
+            @click.native="SIDEBAR = !SIDEBAR"
+          />
+        </span>
       </div>
     </div>
     <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
@@ -168,10 +176,11 @@ export default defineComponent({
     })
 
     return {
-      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
+      SIDEBAR: useSetting("SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
 
       navigatorShare: !!navigator.share,
 
@@ -181,7 +190,7 @@ export default defineComponent({
   },
   watch: {
     ZEN_MODE() {
-      this.LEFT_SIDEBAR = !this.ZEN_MODE
+      this.EXPAND_NAVIGATION = !this.ZEN_MODE
     },
   },
   methods: {

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -14,9 +14,9 @@
         <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
         </div>
-        <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
+        <span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
         <tippy
-          v-if="!LEFT_SIDEBAR"
+          v-if="!EXPAND_NAVIGATION"
           :placement="windowInnerWidth.x.value >= 768 ? 'right' : 'bottom'"
           theme="tooltip"
           :content="navigation.title"
@@ -35,7 +35,7 @@ export default defineComponent({
   setup() {
     return {
       windowInnerWidth: useWindowSize(),
-      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
     }
   },
   data() {

packages/hoppscotch-app/components/button/Secondary.vue

@@ -28,7 +28,7 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
-      { 'bg-primaryDark': filled },
+      { '!bg-primaryDark': filled },
     ]"
     :disabled="disabled"
     tabindex="0"

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -60,8 +59,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -160,8 +158,9 @@ export default defineComponent({
   setup() {
     return {
       windowInnerWidth: useWindowSize(),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
     }
   },
   data() {

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -127,8 +126,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -233,8 +231,9 @@ export default defineComponent({
   setup() {
     return {
       windowInnerWidth: useWindowSize(),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       socketIoClients,
     }
   },

packages/hoppscotch-app/components/realtime/Sse.vue

@@ -1,9 +1,5 @@
 <template>
-  <Splitpanes
-    class="smart-splitter"
-    :dbl-click-splitter="false"
-    :horizontal="COLUMN_LAYOUT"
-  >
+  <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
     <Pane class="hide-scrollbar !overflow-auto">
       <div class="bg-primary flex p-4 top-0 z-10 sticky">
         <div class="space-x-2 flex-1 inline-flex">

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
@@ -175,8 +174,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -231,8 +229,9 @@ export default defineComponent({
   setup() {
     return {
       windowInnerWidth: useWindowSize(),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
     }
   },
   data() {

packages/hoppscotch-app/layouts/default.vue

@@ -60,7 +60,7 @@ import { defineActionHandler } from "~/helpers/actions"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 
 function appLayout() {
-  const rightSidebar = useSetting("RIGHT_SIDEBAR")
+  const rightSidebar = useSetting("SIDEBAR")
   const columnLayout = useSetting("COLUMN_LAYOUT")
   const windowInnerWidth = useWindowSize()
 

packages/hoppscotch-app/locales/en.json

@@ -330,6 +330,7 @@
     "account_name_description": "This is your display name.",
     "background": "Background",
     "black_mode": "Black",
+    "sidebar_on_left": "Sidebar on left",
     "change_font_size": "Change font size",
     "choose_language": "Choose language",
     "dark_mode": "Dark",
@@ -347,7 +348,7 @@
     "interceptor_description": "Middleware between application and APIs.",
     "language": "Language",
     "light_mode": "Light",
-    "navigation_sidebar": "Navigation sidebar",
+    "expand_navigation": "Expand navigation",
     "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
     "profile": "Profile",
     "profile_description": "Update you profile details",

packages/hoppscotch-app/newstore/settings.ts

@@ -35,7 +35,6 @@ export type SettingsType = {
 
   PROXY_ENABLED: boolean
   PROXY_URL: string
-  PROXY_KEY: string
   EXTENSIONS_ENABLED: boolean
   URL_EXCLUDES: {
     auth: boolean
@@ -47,8 +46,9 @@ export type SettingsType = {
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
   TELEMETRY_ENABLED: boolean
-  LEFT_SIDEBAR: boolean
-  RIGHT_SIDEBAR: boolean
+  EXPAND_NAVIGATION: boolean
+  SIDEBAR: boolean
+  SIDEBAR_ON_LEFT: boolean
   ZEN_MODE: boolean
   FONT_SIZE: HoppFontSize
   COLUMN_LAYOUT: boolean
@@ -61,7 +61,6 @@ export const defaultSettings: SettingsType = {
 
   PROXY_ENABLED: false,
   PROXY_URL: "https://proxy.hoppscotch.io/",
-  PROXY_KEY: "",
   EXTENSIONS_ENABLED: true,
   URL_EXCLUDES: {
     auth: true,
@@ -73,8 +72,9 @@ export const defaultSettings: SettingsType = {
   THEME_COLOR: "indigo",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
-  LEFT_SIDEBAR: true,
-  RIGHT_SIDEBAR: true,
+  EXPAND_NAVIGATION: true,
+  SIDEBAR: true,
+  SIDEBAR_ON_LEFT: false,
   ZEN_MODE: false,
   FONT_SIZE: "small",
   COLUMN_LAYOUT: true,

packages/hoppscotch-app/pages/documentation.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">
@@ -157,8 +156,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -193,9 +191,10 @@ export default defineComponent({
   setup() {
     return {
       windowInnerWidth: useWindowSize(),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
     }
   },
   data() {

packages/hoppscotch-app/pages/graphql.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
@@ -20,8 +19,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -62,8 +60,9 @@ export default defineComponent({
 
     return {
       windowInnerWidth: useWindowSize(),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       gqlConn,
     }
   },

packages/hoppscotch-app/pages/index.vue

@@ -1,15 +1,14 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :dbl-click-splitter="false"
+    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :class="{
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+    }"
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
-    <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes
-        class="smart-splitter"
-        :dbl-click-splitter="false"
-        :horizontal="COLUMN_LAYOUT"
-      >
+    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -59,8 +58,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="RIGHT_SIDEBAR"
-      max-size="35"
+      v-if="SIDEBAR"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto"
@@ -296,8 +294,9 @@ export default defineComponent({
         ),
         null
       ),
-      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       confirmSync,
       syncRequest,
       oAuthURL,

packages/hoppscotch-app/pages/settings.vue

@@ -72,28 +72,27 @@
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
                   {{ $t("settings.telemetry") }}
-                  {{
-                    TELEMETRY_ENABLED
-                      ? $t("state.enabled")
-                      : $t("state.disabled")
-                  }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
                 <SmartToggle
-                  :on="LEFT_SIDEBAR"
-                  @change="toggleSetting('LEFT_SIDEBAR')"
+                  :on="EXPAND_NAVIGATION"
+                  @change="toggleSetting('EXPAND_NAVIGATION')"
                 >
-                  {{ $t("settings.navigation_sidebar") }}
-                  {{
-                    LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
-                  }}
+                  {{ $t("settings.expand_navigation") }}
+                </SmartToggle>
+              </div>
+              <div class="flex items-center">
+                <SmartToggle
+                  :on="SIDEBAR_ON_LEFT"
+                  @change="toggleSetting('SIDEBAR_ON_LEFT')"
+                >
+                  {{ $t("settings.sidebar_on_left") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
                 <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
                   {{ $t("layout.zen_mode") }}
-                  {{ ZEN_MODE ? $t("state.enabled") : $t("state.disabled") }}
                 </SmartToggle>
               </div>
             </div>
@@ -258,11 +257,10 @@ export default defineComponent({
     return {
       PROXY_ENABLED: useSetting("PROXY_ENABLED"),
       PROXY_URL: useSetting("PROXY_URL"),
-      PROXY_KEY: useSetting("PROXY_KEY"),
       EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
-      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
+      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
       ZEN_MODE: useSetting("ZEN_MODE"),
     }
   },
@@ -287,22 +285,20 @@ export default defineComponent({
     }
   },
   computed: {
-    proxySettings(): { url: string; key: string } {
+    proxySettings(): { url: string } {
       return {
         url: this.PROXY_URL,
-        key: this.PROXY_KEY,
       }
     },
   },
   watch: {
     ZEN_MODE(ZEN_MODE) {
-      this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
+      this.applySetting("EXPAND_NAVIGATION", !ZEN_MODE)
     },
     proxySettings: {
       deep: true,
-      handler({ url, key }) {
+      handler({ url }) {
         this.applySetting("PROXY_URL", url)
-        this.applySetting("PROXY_KEY", key)
       },
     },
   },