mi6 / mi6/ic-ui-kit

[ic-side-navigation] - navigation group alignment issue

Open
#3,606 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary of the bug
When the side navigation includes a navigation group, the alignment is not centered vertically

### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to page: [side-nav expanded story](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/react-components-side-navigation--side-nav-expanded-event)
2. focus the Navigation Group element
3. See the error:

![Image](https://github.com/user-attachments/assets/041dbe44-5e31-493b-9e46-ef171aa8d186)

Issue can also be seen on hover:

![Image](https://github.com/user-attachments/assets/852e6635-9d50-4c36-90fe-e98f9ae5d11f)

### 🧐 Expected behaviour
the text and icon should be centered vertically within the item

### 🚨 Urgency (low, medium or high)
Low

Contributor guide

Open the contributing guide

Research direction

Start with the side-nav expanded story linked in the reproduction steps and inspect the Navigation Group rendered there, including its focus and hover states. Compare the text and icon positions with the expected vertically centered alignment, then verify the result in those same states.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
Half a day
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.