From e85f7b82325e6a84eae913568ded275d4e0d965a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 20 Oct 2021 13:55:18 +0530
Subject: [PATCH] feat: collapse collections/folders on clicking side border

---
 .../collections/graphql/Collection.vue        | 109 +++++++++-------
 .../components/collections/graphql/Folder.vue | 115 ++++++++--------
 .../components/collections/my/Collection.vue  | 122 +++++++++--------
 .../components/collections/my/Folder.vue      | 123 ++++++++++--------
 .../collections/teams/Collection.vue          | 122 +++++++++--------
 .../components/collections/teams/Folder.vue   | 119 +++++++++--------
 packages/hoppscotch-app/windi.config.js       |   3 +
 7 files changed, 392 insertions(+), 321 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index d9ff964eb..0662016b4 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -97,58 +97,69 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsGraphqlFolder
-        v-for="(folder, index) in collection.folders"
-        :key="`folder-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
-        :picked="picked"
-        :saving-mode="savingMode"
-        :folder="folder"
-        :folder-index="index"
-        :folder-path="`${collectionIndex}/${String(index)}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :is-filtered="isFiltered"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
-      <CollectionsGraphqlRequest
-        v-for="(request, index) in collection.requests"
-        :key="`request-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
-        :picked="picked"
-        :saving-mode="savingMode"
-        :request="request"
-        :collection-index="collectionIndex"
-        :folder-index="-1"
-        :folder-name="collection.name"
-        :folder-path="`${collectionIndex}`"
-        :request-index="index"
-        :doc="doc"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          collection.folders.length === 0 && collection.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.collection") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsGraphqlFolder
+          v-for="(folder, index) in collection.folders"
+          :key="`folder-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${String(index)}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :is-filtered="isFiltered"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <CollectionsGraphqlRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :folder-path="`${collectionIndex}`"
+          :request-index="index"
+          :doc="doc"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <div
+          v-if="
+            collection.folders.length === 0 && collection.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index ce15f2fcd..0d2b09d65 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -93,61 +93,72 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsGraphqlFolder
-        v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="`subFolder-${String(subFolderIndex)}`"
-        class="border-l border-dividerLight ml-6"
-        :picked="picked"
-        :saving-mode="savingMode"
-        :folder="subFolder"
-        :folder-index="subFolderIndex"
-        :folder-path="`${folderPath}/${String(subFolderIndex)}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :is-filtered="isFiltered"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
-      <CollectionsGraphqlRequest
-        v-for="(request, index) in folder.requests"
-        :key="`request-${String(index)}`"
-        class="border-l border-dividerLight ml-6"
-        :picked="picked"
-        :saving-mode="savingMode"
-        :request="request"
-        :collection-index="collectionIndex"
-        :folder-index="folderIndex"
-        :folder-path="folderPath"
-        :folder-name="folder.name"
-        :request-index="index"
-        :doc="doc"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          folder.folders &&
-          folder.folders.length === 0 &&
-          folder.requests &&
-          folder.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.folder") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsGraphqlFolder
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="`subFolder-${String(subFolderIndex)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :folder-path="`${folderPath}/${String(subFolderIndex)}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :is-filtered="isFiltered"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <CollectionsGraphqlRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${String(index)}`"
+          :picked="picked"
+          :saving-mode="savingMode"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-path="folderPath"
+          :folder-name="folder.name"
+          :request-index="index"
+          :doc="doc"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+        />
+        <div
+          v-if="
+            folder.folders &&
+            folder.folders.length === 0 &&
+            folder.requests &&
+            folder.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index f3c5f256a..6b27d2eac 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -116,64 +116,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsMyFolder
-        v-for="(folder, index) in collection.folders"
-        :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :folder="folder"
-        :folder-index="index"
-        :folder-path="`${collectionIndex}/${index}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :is-filtered="isFiltered"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="$emit('remove-request', $event)"
-      />
-      <CollectionsMyRequest
-        v-for="(request, index) in collection.requests"
-        :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :request="request"
-        :collection-index="collectionIndex"
-        :folder-index="-1"
-        :folder-name="collection.name"
-        :folder-path="`${collectionIndex}`"
-        :request-index="index"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="editRequest($event)"
-        @select="$emit('select', $event)"
-        @remove-request="$emit('remove-request', $event)"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          (collection.folders == undefined ||
-            collection.folders.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.collection") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsMyFolder
+          v-for="(folder, index) in collection.folders"
+          :key="`folder-${index}`"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${index}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :is-filtered="isFiltered"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="$emit('remove-request', $event)"
+        />
+        <CollectionsMyRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${index}`"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :folder-path="`${collectionIndex}`"
+          :request-index="index"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="editRequest($event)"
+          @select="$emit('select', $event)"
+          @remove-request="$emit('remove-request', $event)"
+        />
+        <div
+          v-if="
+            (collection.folders == undefined ||
+              collection.folders.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 8cae0848e..1f00fa26d 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -98,65 +98,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsMyFolder
-        v-for="(subFolder, subFolderIndex) in folder.folders"
-        :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-6"
-        :folder="subFolder"
-        :folder-index="subFolderIndex"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @update-team-collections="$emit('update-team-collections')"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
-      <CollectionsMyRequest
-        v-for="(request, index) in folder.requests"
-        :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :request="request"
-        :collection-index="collectionIndex"
-        :folder-index="folderIndex"
-        :folder-name="folder.name"
-        :folder-path="folderPath"
-        :request-index="index"
-        :doc="doc"
-        :picked="picked"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          folder.folders &&
-          folder.folders.length === 0 &&
-          folder.requests &&
-          folder.requests.length === 0
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.folder") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsMyFolder
+          v-for="(subFolder, subFolderIndex) in folder.folders"
+          :key="`subFolder-${subFolderIndex}`"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :folder-path="`${folderPath}/${subFolderIndex}`"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @update-team-collections="$emit('update-team-collections')"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <CollectionsMyRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${index}`"
+          :request="request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-name="folder.name"
+          :folder-path="folderPath"
+          :request-index="index"
+          :doc="doc"
+          :picked="picked"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            folder.folders &&
+            folder.folders.length === 0 &&
+            folder.requests &&
+            folder.requests.length === 0
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 158c289bd..bacb02422 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -112,64 +112,76 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsTeamsFolder
-        v-for="(folder, index) in collection.children"
-        :key="`folder-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :folder="folder"
-        :folder-index="index"
-        :folder-path="`${collectionIndex}/${index}`"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :is-filtered="isFiltered"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @expand-collection="expandCollection"
-        @remove-request="removeRequest"
-      />
-      <CollectionsTeamsRequest
-        v-for="(request, index) in collection.requests"
-        :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :request="request.request"
-        :collection-index="collectionIndex"
-        :folder-index="-1"
-        :folder-name="collection.name"
-        :request-index="request.id"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="editRequest($event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          (collection.children == undefined ||
-            collection.children.length === 0) &&
-          (collection.requests == undefined || collection.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.collection") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsTeamsFolder
+          v-for="(folder, index) in collection.children"
+          :key="`folder-${index}`"
+          :folder="folder"
+          :folder-index="index"
+          :folder-path="`${collectionIndex}/${index}`"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :is-filtered="isFiltered"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @expand-collection="expandCollection"
+          @remove-request="removeRequest"
+        />
+        <CollectionsTeamsRequest
+          v-for="(request, index) in collection.requests"
+          :key="`request-${index}`"
+          :request="request.request"
+          :collection-index="collectionIndex"
+          :folder-index="-1"
+          :folder-name="collection.name"
+          :request-index="request.id"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="editRequest($event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            (collection.children == undefined ||
+              collection.children.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.collection") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 30fac0b9d..f7713e46d 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -95,63 +95,74 @@
         </span>
       </div>
     </div>
-    <div v-if="showChildren || isFiltered">
-      <CollectionsTeamsFolder
-        v-for="(subFolder, subFolderIndex) in folder.children"
-        :key="`subFolder-${subFolderIndex}`"
-        class="border-l border-dividerLight ml-6"
-        :folder="subFolder"
-        :folder-index="subFolderIndex"
-        :collection-index="collectionIndex"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :folder-path="`${folderPath}/${subFolderIndex}`"
-        :picked="picked"
-        @add-folder="$emit('add-folder', $event)"
-        @edit-folder="$emit('edit-folder', $event)"
-        @edit-request="$emit('edit-request', $event)"
-        @update-team-collections="$emit('update-team-collections')"
-        @select="$emit('select', $event)"
-        @expand-collection="expandCollection"
-        @remove-request="removeRequest"
-      />
-      <CollectionsTeamsRequest
-        v-for="(request, index) in folder.requests"
-        :key="`request-${index}`"
-        class="border-l border-dividerLight ml-6"
-        :request="request.request"
-        :collection-index="collectionIndex"
-        :folder-index="folderIndex"
-        :folder-name="folder.name"
-        :request-index="request.id"
-        :doc="doc"
-        :save-request="saveRequest"
-        :collections-type="collectionsType"
-        :picked="picked"
-        @edit-request="$emit('edit-request', $event)"
-        @select="$emit('select', $event)"
-        @remove-request="removeRequest"
-      />
+    <div v-if="showChildren || isFiltered" class="flex">
       <div
-        v-if="
-          (folder.children == undefined || folder.children.length === 0) &&
-          (folder.requests == undefined || folder.requests.length === 0)
-        "
         class="
-          border-l border-dividerLight
-          flex flex-col
-          text-secondaryLight
-          ml-6
-          p-4
-          items-center
-          justify-center
+          flex
+          w-1
+          transform
+          transition
+          cursor-nsResize
+          ml-5.5
+          bg-dividerLight
+          hover:scale-x-125 hover:bg-dividerDark
         "
-      >
-        <i class="opacity-75 pb-2 material-icons">folder_open</i>
-        <span class="text-center">
-          {{ $t("empty.folder") }}
-        </span>
+        @click="toggleShowChildren()"
+      ></div>
+      <div class="flex flex-col flex-1 truncate">
+        <CollectionsTeamsFolder
+          v-for="(subFolder, subFolderIndex) in folder.children"
+          :key="`subFolder-${subFolderIndex}`"
+          :folder="subFolder"
+          :folder-index="subFolderIndex"
+          :collection-index="collectionIndex"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :folder-path="`${folderPath}/${subFolderIndex}`"
+          :picked="picked"
+          @add-folder="$emit('add-folder', $event)"
+          @edit-folder="$emit('edit-folder', $event)"
+          @edit-request="$emit('edit-request', $event)"
+          @update-team-collections="$emit('update-team-collections')"
+          @select="$emit('select', $event)"
+          @expand-collection="expandCollection"
+          @remove-request="removeRequest"
+        />
+        <CollectionsTeamsRequest
+          v-for="(request, index) in folder.requests"
+          :key="`request-${index}`"
+          :request="request.request"
+          :collection-index="collectionIndex"
+          :folder-index="folderIndex"
+          :folder-name="folder.name"
+          :request-index="request.id"
+          :doc="doc"
+          :save-request="saveRequest"
+          :collections-type="collectionsType"
+          :picked="picked"
+          @edit-request="$emit('edit-request', $event)"
+          @select="$emit('select', $event)"
+          @remove-request="removeRequest"
+        />
+        <div
+          v-if="
+            (folder.children == undefined || folder.children.length === 0) &&
+            (folder.requests == undefined || folder.requests.length === 0)
+          "
+          class="
+            flex flex-col
+            text-secondaryLight
+            p-4
+            items-center
+            justify-center
+          "
+        >
+          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <span class="text-center">
+            {{ $t("empty.folder") }}
+          </span>
+        </div>
       </div>
     </div>
     <SmartConfirmModal
diff --git a/packages/hoppscotch-app/windi.config.js b/packages/hoppscotch-app/windi.config.js
index dacfcae80..7356a0a49 100644
--- a/packages/hoppscotch-app/windi.config.js
+++ b/packages/hoppscotch-app/windi.config.js
@@ -41,6 +41,9 @@ export default defineConfig({
         mono: "var(--font-mono)",
         icon: "var(--font-icon)",
       },
+      cursor: {
+        nsResize: "ns-resize",
+      },
     },
   },
 })