Add initial implementation of primary menu
Closes #3456084
This MR adds an initial implementation of the primary menu from the mid-fi wireframes.
Changes:
- Adds new primary menu (left sidebar) using Radix components
- Radix menubar opens on hover by default, so I needed to override this using event.preventDefault. But to make tooltips work when you hover over an icon, I added an invisible <div/> .overlayForHover right over the icon to be the tooltip trigger. When this invisible div is clicked, it dispatches a PointerEvent to the menu and then sets the open menu using the Radix Menubar.Root
onValueChange
api
- Radix menubar opens on hover by default, so I needed to override this using event.preventDefault. But to make tooltips work when you hover over an icon, I added an invisible <div/> .overlayForHover right over the icon to be the tooltip trigger. When this invisible div is clicked, it dispatches a PointerEvent to the menu and then sets the open menu using the Radix Menubar.Root
- Updated vite and tsconfig to add import alias for new /assets directory that contains icons and font from the wireframe.
- Created a new .env variable in vite.config.ts and .env.example
VITE_SERVER_ORIGIN
so the app knows to fetch assets from the dev server instead of the drupal site. - Moved layout to be in the layers tab of the new menu.
To be done in a followup(s):
- Close the menu one drags a component from on drag so the menu is not taking up so much space on the canvas
- Style the draggable components so they look draggable
- Other styling/micro-interactions such as being able to also close the third level submenu on click.
- SVG icon optimization
- Search bar functionality
- Test for dragging a component into the canvas
- A11y check
Edited by Harumi Jang