[UI] Fix K8s switcher not opening when clicking on notification circle on top of k8s logo

[Yashsharma1911]

Current Behavior

As you can see in the video when you hover on k8s switcher icon on Meshery UI header it gives a small animation and when you click on the k8s log, the switcher will slide down, but when you hover on the notification circle on top of k8s logo, animation will happen but when you click on that notification circle switcher will not slide down.

Screen.Recording.2023-08-17.at.5.18.57.PM.mov

This current behavior of k8s switcher gives a bad user experience

Desired Behavior

Desired behavior is whenever user click on k8s logo or notification circle on top of it, it should always slide down k8s switcher

Screenshots/Logs

Environment

• Browser: Chrome Safari Firefox
• Host OS: Mac Linux Windows
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v
• Platform: Docker Kubernetes

---

Contributor Guides and Handbook

• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🖥 Contributing to Meshery UI
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[github-actions]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[akebu6]

Hello, may I have the issue assigned to me?

[akebu6]

@Yashsharma1911, the desired behaviour is to have the slider be displayed down upon clicking on the k8s logo and the notification icon correct?

[charu1603]

I would like to work on this pending issue. @leecalcote @Yashsharma1911, could you please assign me

[Yashsharma1911]

@Yashsharma1911, the desired behaviour is to have the slider be displayed down upon clicking on the k8s logo and the notification icon correct?

Yes @akebu6, have you made any progress?

[Yashsharma1911]

I would like to work on this pending issue. @leecalcote @Yashsharma1911, could you please assign me

Thanks for raising your hand @charu1603 let's wait for @akebu6's response for her progress if she will make PR it will be helpful if you can review it ^^

[akebu6]

I am still working on the issue, I just had a setback with my configurations but I should have a PR by today

[charu1603]

I would love to review this PR
@akebu6 are you still working on this issue?

[akebu6]

@charu1603 I'm still working on it. Actually do you mind also helping me out? I reached out in the main slack channel but I haven't gotten any feedback yet

[charu1603]

@charu1603 I'm still working on it. Actually do you mind also helping me out? I reached out in the main slack channel but I haven't gotten any feedback yet

Sure , lets connect on slack @akebu6

[akebu6]

@charu1603 you can ping me on slack, I use Akebu so it's easy to find me

[Yana-Gupta]

@Yashsharma1911 Shall I work on this issue, if noone is working on it.

[Yashsharma1911]

@Yana-Gupta yes please go ahead ^^

[Yana-Gupta]

@Yashsharma1911 The problem doesn't exist on the local development of the site. I have figured out that the problem is due to the 'transform' CSS property of the slider. The 'transform' CSS property is not working as desired; it is always set to 'none' when hovering or clicking the notification icon. It's hard to make any changes in the code on the local development environment, as it is working fine there.

[akebu6]

@Yana-Gupta that's the problem I faced, how to change it when it's working fine on the local. But hopefully you'll figure it out :⁠-⁠)

[Yana-Gupta]

@Yana-Gupta that's the problem I faced, how to change it when it's working fine on the local. But hopefully you'll figure it out :⁠-⁠)

@akebu6 Let's work on this together. Are you available to work together.

[akebu6]

@Yana-Gupta I'm still up for working with it. I'd like to know how it can be fixed honestly. When can we start?

[veryharsh123]

is anyone currently working on this?
I've looked at the code and would like to help out/work on it.

[Yashsharma1911]

@veryharsh123 thanks for raising your hand this issue is fixed now, you can refer to other issues which are similar or if you need any help you can jump into slack and ask your question