starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 09:16:03 +03:00

[GH-ISSUE #3508] [bug]: Unclear demarcation of "collapsed" sidebar #1186

New issue

Open

opened 2026-03-16 19:02:34 +03:00 by kerem · 3 comments

kerem commented

2026-03-16 19:02:34 +03:00

Owner

Originally created by @zeddD1abl0 on GitHub (Nov 8, 2023).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3508

Is there an existing issue for this?

I have searched the existing issues

Current behavior

The user interface for Hoppscotch becomes confusing if you hide the Collections/Environments/History sidebar, as the sidebar disappears, and there does not appear to be an obvious way to bring it back. In specific:

Is a bad design choice, as it becomes confusing and unclear if you stop using the user interface. Given the above picture, if you know the interface very well, you know that the "first" sidebar is set to proper icons with labels, and the "second" sidebar is hidden. However, this also leads to confusion about whether the "second" sidebar even exists, as it gets hidden, and essentially disappears from the user UI entirely.

Steps to reproduce

Go to hoppscotch.io
Click on the "Collapse Sidebar" button in the very bottom left corner
Ask someone with limited experience with the specific UI where the history is.

TBH, reproduction of this issue isn't really a thing. This is more of an accessibility issue more than anything.

Environment

Production

Version

Cloud

Originally created by @zeddD1abl0 on GitHub (Nov 8, 2023). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/3508 ### Is there an existing issue for this? - [X] I have searched the existing issues ### Current behavior The user interface for Hoppscotch becomes confusing if you hide the Collections/Environments/History sidebar, as the sidebar disappears, and there does not appear to be an obvious way to bring it back. In specific: ![image](https://github.com/hoppscotch/hoppscotch/assets/8335605/0f89414e-07b4-4145-bf2b-a72ee58cc240) Is a bad design choice, as it becomes confusing and unclear if you stop using the user interface. Given the above picture, if you know the interface very well, you know that the "first" sidebar is set to proper icons with labels, and the "second" sidebar is hidden. However, this also leads to confusion about whether the "second" sidebar even exists, as it gets hidden, and essentially disappears from the user UI entirely. ### Steps to reproduce 1. Go to hoppscotch.io 2. Click on the "Collapse Sidebar" button in the very bottom left corner 3. Ask someone with limited experience with the specific UI where the history is. TBH, reproduction of this issue isn't really a thing. This is more of an accessibility issue more than anything. ### Environment Production ### Version Cloud

kerem added the

bug

need testing

labels

2026-03-16 19:02:34 +03:00

kerem commented

2026-03-16 19:02:45 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 9, 2023):

I admit the current implantation of how sidebar works is not the best and there's room for improvements.

We're prioritising this issue, feel free to suggest what should have been an ideal flow to expand/collapse sidebars, placement for the buttons and open to discussions on the UX.

@liyasthomas commented on GitHub (Nov 9, 2023): I admit the current implantation of how sidebar works is not the best and there's room for improvements. We're prioritising this issue, feel free to suggest what should have been an ideal flow to expand/collapse sidebars, placement for the buttons and open to discussions on the UX.

kerem commented

2026-03-16 19:02:50 +03:00

Author

Owner

@zeddD1abl0 commented on GitHub (Nov 9, 2023):

I wouldn't propose to tell people how best to implement the UI elements, as I'm a DevSecOps engineer, but I would prefer that the buttons be placed more logically, and possibly labelled better.

I could consider putting the "Expand/Collapse Sidebar" option as the first icon/label in the sidebar, or at the bottom of the sidebar, rather than the footer of the page. There is a large amount of space in the sidebar for extra menu options without cluttering it too much. It is possible to also make it a floating symbol somewhere on the division. I was looking for examples, but I'm not finding any immediately. I may need to mock something up.

As for the "Collections/Environments/History", whether they maintain their link to the workspace, or become menus in the sidebar, or even a submenu in the sidebar, I have no preference. I would suggest that they maintain a similar style to the sidebar for expanding/collapsing, but a concept I would suggest investigation of is to not entirely hide this sidebar, so people can obviously see it when looking at the main UI, and have it activate when people click on it, and hide when it is not in focus.

Those are just off the top of my head. If I get a chance, I'll come back with some simple examples.

@zeddD1abl0 commented on GitHub (Nov 9, 2023): I wouldn't propose to tell people how best to implement the UI elements, as I'm a DevSecOps engineer, but I would prefer that the buttons be placed more logically, and possibly labelled better. I could consider putting the "Expand/Collapse Sidebar" option as the first icon/label in the sidebar, or at the bottom of the sidebar, rather than the footer of the page. There is a large amount of space in the sidebar for extra menu options without cluttering it too much. It is possible to also make it a floating symbol somewhere on the division. I was looking for examples, but I'm not finding any immediately. I may need to mock something up. As for the "Collections/Environments/History", whether they maintain their link to the workspace, or become menus in the sidebar, or even a submenu in the sidebar, I have no preference. I would suggest that they maintain a similar style to the sidebar for expanding/collapsing, but a concept I would suggest investigation of is to not entirely hide this sidebar, so people can obviously see it when looking at the main UI, and have it activate when people click on it, and hide when it is not in focus. Those are just off the top of my head. If I get a chance, I'll come back with some simple examples.

kerem commented

2026-03-16 19:02:55 +03:00

Author

Owner

@tuliolima commented on GitHub (Nov 26, 2024):

It is very annoying and confusing to me that the sidebar completely disappears when collapsed. When I need the sidebar again, I look for it but I need to find a button in another place to open it.

To me, it is like a drawer that I open, get something I need and close again. If the sidebar only shrank when collapsed (still displaying the icons), I could click an icon (Collections, for example), what will opens the sidebar, get what I need, and click the icon again, what will collapse the sidebar.

Is it difficult to implement?

@tuliolima commented on GitHub (Nov 26, 2024): It is very annoying and confusing to me that the sidebar completely disappears when collapsed. When I need the sidebar again, I look for it but I need to find a button in another place to open it. To me, it is like a drawer that I open, get something I need and close again. If the sidebar only shrank when collapsed (still displaying the icons), I could click an icon (Collections, for example), what will opens the sidebar, get what I need, and click the icon again, what will collapse the sidebar. Is it difficult to implement?

kerem referenced this issue

2026-03-17 00:46:00 +03:00

[PR #1186] [CLOSED] Bump firebase from 7.21.0 to 7.21.1 #3122