[BUG] Unresponsive Menu Component

[The-Phoenics]

Describe the bug
Currently the Menu component behaves not as expected, with window resize.

To Reproduce
Steps to reproduce the behavior:

1. Go to website
2. Resize the page
3. Notice the menu bar

Expected behavior
Menu component should adapt to the screen size and should not break its child nodes alignment.
This could be done by fixing the styling for the adjacent eye & theme button. And adding reponsiveness to the Menu component!

Screenshots

Desktop (please complete the following information):

• OS: [Linux]
• Browser [Chrome]

Hey @singodiyashubham87, I would like to work on this to for GSSoC'24. This would improve the User Experience and make application look better and easy to use.

[github-actions]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible. In the meantime you can star the repo and read the contributing.md

[singodiyashubham87]

@The-Phoenics How will you approach to resolve the issue?

[The-Phoenics]

Taking some inspiration from excalidraw, the current menu bar can be changed to a icon-only based tool bar with dropdowns. I will make the layout responsive for all the screen sizes.
Somewhat similar to this:

which could be achieved with position: absolute/sticky & flex css styling.

Similar can be done with bg-color toolbar putting by it to appropriate left side of screen keeping drawing canvas as center, and adding toggle for smaller screen sizes.
I would appreciate your feedback on this idea, @singodiyashubham87.

[singodiyashubham87]

@The-Phoenics Fair enough, Assigned you the issue, Best of Luck :)