Fix: Modified z-index for draggable components, navbar and tabsBar in both expanded and collapsed states of tabsBar

[Chandrachur67]

Fixes #260

Describe the changes you have made in this PR -

1. Modified the z-index values to be assigned to draggable elements during the "mousedown" event (set to previous values similar to circuitverse.org/simulator)

2. Modified code for the event listener of the tabsBar expand and collapse button

• when expanded, added inline CSS to the navbar and tabsBar to have a higher z-index so that they appear on top of draggable panels.
• when collapsed, removed the inline styling to revert back to original values so that draggable panels appear on top of everything.

Screenshots of the changes (If any) -

Before

Once draggable components are moved to overlap with the top section, it loses the functionality of moving further

After

tabsBar not expanded state => draggable panels on top of everything.

tabsBar expanded state => navbar and tabsBar on top of draggable components for better accessibility of tabsBar

Video demonstrating the change

https://github.com/CircuitVerse/cv-frontend-vue/assets/97349505/4956b3f1-df26-48ef-9ee4-a19a5fa9134e

Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.

[netlify[bot]]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	489151ee6a76260743c3ffc09fdb95051722e526
🔍 Latest deploy log	https://app.netlify.com/sites/circuitverse/deploys/65f35eff40a30700083540b3
😎 Deploy Preview	https://deploy-preview-261--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Chandrachur67]

Hey @Arnabdaz, Please take a look at this. I have fixed the z-indexes following the requirements you specified.

[Chandrachur67]

Sure. Sorry for the glitch. I will fix this.

Clarification needed

However I need one more clarification: The z-index of dropdown menu is controlled by the z-index of the navbar. So in collapsed state, even if any a nav-dropdown item is expanded due to higher z-index of draggable components it will not come on top of draggable-component. Is this behaviour ok? if ok then I have done it and mentioned all the changes below.

But if you want me change this behaviour, then I have to modify and add event-listeners to some components of navbar and it will make the changes complex bacuase that is probably controlled by aria-expanded and data-toggle. please let me know what you want.

Propsed Solution

This is the behaviour I am trying to implement: Changing the value of z-index of #tabsBar in TabsBar.vue to 99.

In collapsed mode

z-index : draggable-components > navbar > tabsBar

In expanded mode

z-index: navbar > tabsBar > draggable-components

The exact values I am planning to use:

tabsBar state	navbar	tabsBar	draggable components
Expanded	103	102	<102
Collapsed	100	99	(101 for selected and 100 for others)

Images

In collapsed mode

In expanded mode

[Chandrachur67]

Hey @Arnabdaz I have updated the code and I believe we will be getting the expected behaviour.

Video for reference

https://github.com/CircuitVerse/cv-frontend-vue/assets/97349505/e90a4731-f73c-4883-a10c-d62494854ef8

[Chandrachur67]

@Arnabdaz @Prerna-0202 it would be great if you could take a look at this.

[b-harsh]

i have got some ideas should i start working on this issue @Chandrachur67 @Arnabdaz