[UI/UX Issue] Left side navigation Bar, when any list item is expanded the "arrow_down" icon should be replaced with "arrow_up" icon for better UI and user experience.

Question

[UI/UX Issue] Left side navigation Bar, when any list item is expanded the "arrow_down" icon should be replaced with "arrow_up" icon for better UI and user experience.

Captainnik53 opened this issue 9 months ago · comments

What would you like to share?

Expand any of the items from left side navigation bar. Observe the icon to the right of the item. It should ideally change to arrow_up icon when the item is expanded for better UI and user experience.

Additional information

👀 Have you checked if this issue has been raised before?

I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

I have read and understood the rules in the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

github-actions · Answer 1 · Fri Oct 06 2023 20:37:19 GMT+0800 (China Standard Time)

It's great having you contribute to this project by creating an issue

Make sure you are assigned to this before you work on it and you read the Contributing.md file, Thank you! Welcome to the community 🤓

Nik · Answer 2 · Fri Oct 06 2023 20:38:39 GMT+0800 (China Standard Time)

@Dun-sin I am willing to work on this issue for the ongoing Hacktoberfest. Please assign it to me if you think this is a valid issue. Thank you 🙏🏼

Dunsin · Answer 3 · Fri Oct 06 2023 21:56:02 GMT+0800 (China Standard Time)

How would you do that?

Nik · Answer 4 · Sat Oct 07 2023 14:19:42 GMT+0800 (China Standard Time)

@Dun-sin

Steps to achieve above functionality

Identify the iconfiy-icon element in the already added eventListener of icon element in main.ts
Change the icon attribute of iconify-icon from material-symbols:arrow-drop-down-rounded to material-symbols:arrow-drop-up-rounded which will result in upwards arrow and vice versa.

Resulting UI would be something like this. Let me know if this is the correct approach. Also, can you please add the tag hacktoberfest to the issue, it would be a great help as I am participating in it. Thank you 🙏

Screen.Recording.2023-10-07.at.11.39.35.AM.mov

Dunsin · Answer 5 · Sat Oct 07 2023 14:50:21 GMT+0800 (China Standard Time)

@Dun-sin

Steps to achieve above functionality
1. Identify the iconfiy-icon element in the already added eventListener of icon element in main.ts

2. Change the `icon` attribute of iconify-icon from `material-symbols:arrow-drop-down-rounded` to `material-symbols:arrow-drop-up-rounded` which will result in upwards arrow and vice versa.
Resulting UI would be something like this. Let me know if this is the correct approach. Also, can you please add the tag hacktoberfest to the issue, it would be a great help as I am participating in it. Thank you 🙏
Screen.Recording.2023-10-07.at.11.39.35.AM.mov

the necessary labels are already in place, your proposed changes look good, quick question what browser are you using?

Nik · Answer 6 · Sat Oct 07 2023 15:07:34 GMT+0800 (China Standard Time)

@Dun-sin
Steps to achieve above functionality
1. Identify the iconfiy-icon element in the already added eventListener of icon element in main.ts

2. Change the `icon` attribute of iconify-icon from `material-symbols:arrow-drop-down-rounded` to `material-symbols:arrow-drop-up-rounded` which will result in upwards arrow and vice versa.
Resulting UI would be something like this. Let me know if this is the correct approach. Also, can you please add the tag hacktoberfest to the issue, it would be a great help as I am participating in it. Thank you 🙏
Screen.Recording.2023-10-07.at.11.39.35.AM.mov
the necessary labels are already in place, your proposed changes look good, quick question what browser are you using?

I am using Opera browser

Dunsin · Answer 7 · Sat Oct 07 2023 15:09:24 GMT+0800 (China Standard Time)

@Dun-sin
Steps to achieve above functionality
1. Identify the iconfiy-icon element in the already added eventListener of icon element in main.ts

2. Change the `icon` attribute of iconify-icon from `material-symbols:arrow-drop-down-rounded` to `material-symbols:arrow-drop-up-rounded` which will result in upwards arrow and vice versa.
Resulting UI would be something like this. Let me know if this is the correct approach. Also, can you please add the tag hacktoberfest to the issue, it would be a great help as I am participating in it. Thank you 🙏
Screen.Recording.2023-10-07.at.11.39.35.AM.mov
the necessary labels are already in place, your proposed changes look good, quick question what browser are you using?
I am using Opera browser

thanks

Nik · Answer 8 · Sat Oct 07 2023 15:31:41 GMT+0800 (China Standard Time)

@Dun-sin I have created a PR. Please review it.

Dunsin · Answer 9 · Sat Oct 07 2023 15:38:40 GMT+0800 (China Standard Time)

@Dun-sin I have created a PR. Please review it.

keep in mind in the future you don't need to comment back on the Issue, it's not my first rodeo, so I see your PR and will definitely do the necessary. It will just cause unnecessary notifications for me and others.

Dunsin · Answer 10 · Sat Oct 07 2023 17:02:20 GMT+0800 (China Standard Time)

🎉 This issue has been resolved in version 2.70.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀