[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]

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?

• [X] I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• [X] 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[bot]]

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 :nerd_face:

[Captainnik53]

@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 🙏🏼

[Dun-sin]

How would you do that?

[Captainnik53]

@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 🙏

https://github.com/Dun-sin/Code-Magic/assets/57678528/9fa1e6d7-37c8-4971-a5aa-661d152704ce

[Dun-sin]

@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?

[Captainnik53]

@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

[Dun-sin]

@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

[Captainnik53]

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

[Dun-sin]

@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.

[Dun-sin]

:tada: This issue has been resolved in version 2.70.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: