Skip to content

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
  • 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

Merge request reports

Loading