mi6 / mi6/ic-ui-kit

[ic-side-navigation] Move ic-badge from icon to right hand side of content

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

Description

## Summary
Currently the `ic-badge` on an `ic-navigation-item` in an expanded `ic-side-navigation` is anchored to the icon. To bring in line with `ic-tabs` this should be moved to the right-hand side of the button.

![Image](https://github.com/user-attachments/assets/38cf42a5-5cb4-4ec7-92da-9818f1bba7c1)

ic-tabs example
![Image](https://github.com/user-attachments/assets/fc58dc30-e296-4a4b-826e-9856a8f29445)

This would also avoid future issues where the badge could overflow the button label if there were more content.

Contributor guide

Open the contributing guide

Research direction

Start by locating the ic-side-navigation and ic-navigation-item implementation and styling, then compare the badge placement with ic-tabs. Done means the ic-badge appears on the right-hand side of the button content in expanded navigation and does not risk overlapping longer labels; no test file is named in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
63/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.