Bug (UI): When ElementsPanel is moved to overlap the Navbar, it becomes locked there and loses the ability to be dragged.

[Chandrachur67]

Describe the bug
The draggable ElementsPanel can be moved to overlap with the Navbar component and if we leave that there then we lose the functionality to move the ElementsPanel further because the Navbar appears on top of the ElementsPanel Component.

To Reproduce
Steps to reproduce the behavior:

1. Go to cv-frontend-vue
2. Move the ElementsPanel such that it overlaps the Navbar at the top of the screen.
3. Leave it there
4. Now try to move the ElementsPanel component
5. Error: You won't be able to move it.

Expected behavior
I can think of two possible solutions.

1. Making the ElementsPanel appear on top of Navbar making it always free to move.
2. Restricting the ElementsPanel to overlap with the Navbar

Screenshots

This is movable

This is not movable

Device Information [optional]:

• OS: macOS
• Browser Brave
• Version 1.61.109

Additional context
I think need to think of one more edge case i.e. when Navbar options are expanded. Considering this case the first possible solution seems better to me.

Are you working on this issue? (Yes/No)
Yes

[Chandrachur67]

@Arnabdaz please take a look at this. I have already started working on this. please assign this to me.

Also please let me know if you want any changes in the issue

[Arnabdaz]

@Chandrachur67 you can work on the issue check now the tabsbar must also be having the same issue after merging #223 fix that also ... mostly its a issue of z-index.

[Chandrachur67]

@Arnabdaz thank you so much. I will surely consider the changes in #223 .

I need some clarifications regarding the solution

Which solution you want me to implement

1. Making the ElementsPanel appear on top of Navbar making it always free to move (using z-index).
2. Restricting the ElementsPanel to not overlap with the Navbar

clarifications needed regarding approach 1:
The z-index of draggable elements should be the highest or do you want it to be less than some specific elements?

clarifications needed regarding approach 2:
Do you want the draggable elements to be strictly under the div with simulationArea or is it ok if the top part that is used to drag or the header is inside that div and some bottom part can go little out of bound? The first case is slightly complicated as we have to take the height of the non-header part also into consideration.

Thanks again.

[Arnabdaz]

We would go with 1

Check the old simulator at circuitverse.org/simulator implement as it is in there.

Also when the tabsbar expand make sure the tabsbar is above the panels.

[Chandrachur67]

Thanks for the clarification. The solution is almost ready. I will raise a pr very soon.

[29deepanshutyagi]

hi , i want to work on this issue , as there is an inactivity on this issue from various months ,so kindly assign me @Arnabdaz