mi6 / mi6/ic-ui-kit

[ic-side-navigation]: Add functionality to swap out navigation item for another element such as Button

Open
#1,265 1 comment 0 reactions 0 assignees View on GitHub
side-navigation component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
At the moment, only navigation items work with side navigation (i.e. functionality, slots and styling). This ticket is to investigate if there should be functionality to allow buttons as well.

## 💬 Description
In it's current state, Side Navigation is used with `ic-navigation-item` to allow consumers to switch between pages. However, there may be a need to swap the navigation items for buttons to allow additional functionality such as displaying popover menus or dialogs.

## 💰 User value
This will cover uses cases from v1 which allowed consumers to switch out the navigation items and pass props using an object.

## 📚 User Stories
If relevant, describe the high-level functionality as user stories.

*As an* developer:
*I need to use a button instead of a navigation item*
*So that i can pass an onClick to display a popover menu*

*As an* developer:
*I need to use a button instead of a navigation item*
*So that i can pass an onClick to display a dialog*

## 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

*Given that an IcButton is added to the navigation item slot*
*When the button is added*
*Then the styling should appear correctly for the close and expanded side nav state*

*Given that an IcButton is added to the navigation item slot*
*When the button is added*
*Then the styling should appear correctly for the collapsed label and icons variant*

*Given that an IcButton is added to the navigation item slot*
*When the button is clicked*
*Then the onClick function should be invoked*

## ✏ Designs
N/A

##  🧾 Guidance
N/A

## Additional info
@DBD324 - Think there should be a discussion for this request. Should this be introduced to side navigation or should a pattern be suggested instead

Example using Navigation Item: https://stackblitz.com/edit/stackblitz-starters-xk8hpp?file=src%2FApp.tsx%3AL19

Contributor guide

Open the contributing guide

Research direction

Start with the side navigation implementation and the example entry point in src/App.tsx from the linked StackBlitz example. Resolve whether button replacement belongs in side navigation or should be a separate pattern, then verify the chosen approach covers expanded, collapsed, and icon variants, styling, and button click behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.