feat: vertical and horizontal layout support

packages/hoppscotch-app/pages/documentation.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="import">
             <div class="flex p-4 items-start justify-between">
@@ -190,6 +194,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),
     }
   },

packages/hoppscotch-app/pages/graphql.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
@@ -59,6 +63,7 @@ export default defineComponent({
     return {
       windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       gqlConn,
     }
   },

packages/hoppscotch-app/pages/index.vue

@@ -5,7 +5,11 @@
     :horizontal="!(windowInnerWidth.x.value >= 768)"
   >
     <Pane class="hide-scrollbar !overflow-auto">
-      <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
+      <Splitpanes
+        class="smart-splitter"
+        :dbl-click-splitter="false"
+        :horizontal="COLUMN_LAYOUT"
+      >
         <Pane class="hide-scrollbar !overflow-auto">
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -279,6 +283,7 @@ export default defineComponent({
         null
       ),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       confirmSync,
       syncRequest,
       oAuthURL,

packages/hoppscotch-app/pages/settings.vue

@@ -417,7 +417,6 @@ export default defineComponent({
   watch: {
     ZEN_MODE(ZEN_MODE) {
       this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      // this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
     },
     proxySettings: {
       deep: true,