[PR #1219] [MERGED] Fixed sidenav animation #3149

New issue

Closed

opened 2026-03-17 00:47:22 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:47:22 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1219
Author: @arshzip
Created: 10/3/2020
Status: ✅ Merged
Merged: 10/3/2020
Merged by: @liyasthomas

Base: ui ← Head: master

📝 Commits (3)

c4bca01 fixed sidenav icon transition
a9240ce fixed transition-property of nav links
c66fe79 Merge branch 'master' into master

📊 Changes

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

View changed files

📝 components/layout/sidenav.vue (+2 -0)

📄 Description

Bug fixed
Sidenav animation did not work

To Reproduce
Click on the sidenav icons. The animation is abrupt.

Expected behavior
The icon should slowly expand when it becomes active.

Explanation

The border-radius on the nav link icons was set to 9999px, hence transitioning to 16px in 200ms did produce a noticeable change.
transition-property on the nav > a tags did not include border-radius.
These were most likely due to Tailwind CSS (or that's what I understood from @apply)

Solution

Set border-radius to 50% for a circle instead of using 9999px.
Set transition-property to all !important for nav > a links.

I have verified that this fixes the animation.

_{🔄 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/1219 **Author:** [@arshzip](https://github.com/arshzip) **Created:** 10/3/2020 **Status:** ✅ Merged **Merged:** 10/3/2020 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `ui` ← **Head:** `master` --- ### 📝 Commits (3) - [`c4bca01`](https://github.com/hoppscotch/hoppscotch/commit/c4bca016eb88a007cf8cd8876f8d6b8981b9d75e) fixed sidenav icon transition - [`a9240ce`](https://github.com/hoppscotch/hoppscotch/commit/a9240ce4e414f44ca8acc0d8353d0424ee52f283) fixed transition-property of nav links - [`c66fe79`](https://github.com/hoppscotch/hoppscotch/commit/c66fe79264918314347376270a16e8599f0a8f5c) Merge branch 'master' into master ### 📊 Changes **1 file changed** (+2 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `components/layout/sidenav.vue` (+2 -0) </details> ### 📄 Description **Bug fixed** Sidenav animation did not work **To Reproduce** Click on the sidenav icons. The animation is abrupt. **Expected behavior** The icon should slowly expand when it becomes active. **Explanation** - The `border-radius` on the nav link icons was set to `9999px`, hence transitioning to `16px` in 200ms did produce a noticeable change. - `transition-property` on the `nav > a` tags did not include border-radius. - These were most likely due to Tailwind CSS (or that's what I understood from `@apply`) **Solution** - Set `border-radius` to `50%` for a circle instead of using `9999px`. - Set `transition-property` to `all !important` for `nav > a` links. I have verified that this fixes the animation. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>