[PR #2933] [CLOSED] Collapsible secondary sidebar #4143

New issue

Closed

opened 2026-03-17 01:42:21 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:42:21 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/2933
Author: @nivedin
Created: 2/26/2023
Status: ❌ Closed

Base: main ← Head: refactor/sidebar-ux-change

📝 Commits (9)

98e988b refactor: sidebar UX change WIP
43e64e4 refactor: min width set to pane layout
f6a8267 fix: bugs and pane resize width
e50ea3f refactor: moved collapsible functions to sidebar
7f54930 chore: minor change
8f524b8 feat: indroduce collapsible sidebar in graphql
bc4540c fix: disable sidepane width change in horizontal
7a21969 fix: uncollapse when draging closed sidebar
4e5b4a7 fix: bug when panewidth not found in localstorage

📊 Changes

6 files changed (+189 additions, -13 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+0 -6)
📝 packages/hoppscotch-common/src/components/app/PaneLayout.vue (+36 -1)
📝 packages/hoppscotch-common/src/components/graphql/Sidebar.vue (+42 -1)
📝 packages/hoppscotch-common/src/components/http/Sidebar.vue (+42 -1)
📝 packages/hoppscotch-common/src/newstore/settings.ts (+8 -0)
📝 packages/hoppscotch-ui/src/components/smart/Tabs.vue (+61 -4)

📄 Description

Description

This PR adds the feature to collapse and uncollapse the secondary sidebar. A user can toggle collapse the sidebar if they click an active tab in the sidebar.

Before

After

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/2933 **Author:** [@nivedin](https://github.com/nivedin) **Created:** 2/26/2023 **Status:** ❌ Closed **Base:** `main` ← **Head:** `refactor/sidebar-ux-change` --- ### 📝 Commits (9) - [`98e988b`](https://github.com/hoppscotch/hoppscotch/commit/98e988b2040daf5a3381e5c79e1aa98301124ad8) refactor: sidebar UX change WIP - [`43e64e4`](https://github.com/hoppscotch/hoppscotch/commit/43e64e4be2a6ba58026366984c39cb08ff796ba6) refactor: min width set to pane layout - [`f6a8267`](https://github.com/hoppscotch/hoppscotch/commit/f6a8267a8671c1fbf4d98227e672a8c6ca935380) fix: bugs and pane resize width - [`e50ea3f`](https://github.com/hoppscotch/hoppscotch/commit/e50ea3f337e580a2e29090a9f8d5f7ddca96cc1d) refactor: moved collapsible functions to sidebar - [`7f54930`](https://github.com/hoppscotch/hoppscotch/commit/7f5493010e81ec06e298360eea1b9d2f7195dda4) chore: minor change - [`8f524b8`](https://github.com/hoppscotch/hoppscotch/commit/8f524b882b57c238dc9c7006e9672dc73ee9910e) feat: indroduce collapsible sidebar in graphql - [`bc4540c`](https://github.com/hoppscotch/hoppscotch/commit/bc4540cb5924ba29a188384abd96061680dc22a9) fix: disable sidepane width change in horizontal - [`7a21969`](https://github.com/hoppscotch/hoppscotch/commit/7a2196967907442a21bbe179aabd833723376710) fix: uncollapse when draging closed sidebar - [`4e5b4a7`](https://github.com/hoppscotch/hoppscotch/commit/4e5b4a727e90200e28b7923d63988c3c47ee40cb) fix: bug when panewidth not found in localstorage ### 📊 Changes **6 files changed** (+189 additions, -13 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+0 -6) 📝 `packages/hoppscotch-common/src/components/app/PaneLayout.vue` (+36 -1) 📝 `packages/hoppscotch-common/src/components/graphql/Sidebar.vue` (+42 -1) 📝 `packages/hoppscotch-common/src/components/http/Sidebar.vue` (+42 -1) 📝 `packages/hoppscotch-common/src/newstore/settings.ts` (+8 -0) 📝 `packages/hoppscotch-ui/src/components/smart/Tabs.vue` (+61 -4) </details> ### 📄 Description ### Description This PR adds the feature to collapse and uncollapse the secondary sidebar. A user can toggle collapse the sidebar if they click an active tab in the sidebar. #### Before ![image](https://user-images.githubusercontent.com/53208152/221420188-d29a7421-d333-42df-a06c-76ca1b98aa93.png) #### After ![image](https://user-images.githubusercontent.com/53208152/221420167-6136202d-e954-4b93-9787-d6da8c4b347b.png) ### Checks - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>