[PR #331] [CLOSED] Make primary and secondary navs easier to distinguish #2564

New issue

Closed

opened 2026-03-17 00:15:24 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:15:24 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/331
Author: @roryokane
Created: 11/24/2019
Status: ❌ Closed

Base: master ← Head: add-nav-spacing

📝 Commits (1)

afc5503 Make primary and secondary navs easier to distinguish

📊 Changes

1 file changed (+2 additions, -0 deletions)

View changed files

📝 assets/css/styles.scss (+2 -0)

📄 Description

Add more space between the primary nav (Home, WebSocket, GraphQL, Settings) and the secondary nav (the sections of the current app page, for example Request, Options, and Response).

Background

When I first opened Postwoman and tried to understand the interface, the primary and secondary navs looked like just one big primary nav to me. I clicked on each primary nav item one by one to explore, and I only noticed that secondary nav items worked differently when I clicked on one and it didn’t take me to a new page. There is a tiny dividing line between the navs in the sidebar, but it was so subtle I didn’t see it until after I noticed that the button I clicked had worked differently.

There are many possible ways to make the difference in navs more obvious, such as making the buttons look more different or adding a textual header, but adding spacing seems like a good, simple initial improvement. I chose 16px of extra spacing on each side of the divider because it looked best to my eyes compared to 8px and 12px. 16px is also used in some styles on nearby elements, so it keeps the interface somewhat consistent.

Screenshots

Before this change	After this change

_{🔄 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/331 **Author:** [@roryokane](https://github.com/roryokane) **Created:** 11/24/2019 **Status:** ❌ Closed **Base:** `master` ← **Head:** `add-nav-spacing` --- ### 📝 Commits (1) - [`afc5503`](https://github.com/hoppscotch/hoppscotch/commit/afc5503757b31615949598fc70c38bbd1910a529) Make primary and secondary navs easier to distinguish ### 📊 Changes **1 file changed** (+2 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `assets/css/styles.scss` (+2 -0) </details> ### 📄 Description Add more space between the primary nav (Home, WebSocket, GraphQL, Settings) and the secondary nav (the sections of the current app page, for example Request, Options, and Response). ## Background When I first opened Postwoman and tried to understand the interface, the primary and secondary navs looked like just one big primary nav to me. I clicked on each primary nav item one by one to explore, and I only noticed that secondary nav items worked differently when I clicked on one and it didn’t take me to a new page. There is a tiny dividing line between the navs in the sidebar, but it was so subtle I didn’t see it until after I noticed that the button I clicked had worked differently. There are many possible ways to make the difference in navs more obvious, such as making the buttons look more different or adding a textual header, but adding spacing seems like a good, simple initial improvement. I chose 16px of extra spacing on each side of the divider because it looked best to my eyes compared to 8px and 12px. 16px is also used in some styles on nearby elements, so it keeps the interface somewhat consistent. ## Screenshots | Before this change | After this change | | ------------- | ------------- | | ![before, dark theme](https://user-images.githubusercontent.com/79168/69499241-14936300-0ebe-11ea-963f-047bd0abd636.png) | ![after, dark theme](https://user-images.githubusercontent.com/79168/69499245-1826ea00-0ebe-11ea-8374-44a8aa6f4ebe.png) | | ![before, light theme](https://user-images.githubusercontent.com/79168/69499247-19f0ad80-0ebe-11ea-978a-76dfa49bd597.png) | ![after, light theme](https://user-images.githubusercontent.com/79168/69499248-1bba7100-0ebe-11ea-85f6-4a485a5499df.png) | --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>