Hey all,
So I’m building a very (seemingly) simple component. It’s a menu featuring 5 items. The currently selected item is the default displayed state. If the user clicks on this displayed item, the menu appears, listing the 5 items, with the currently selected one highlighted, and hover interaction on the others - if the user selects the same item in the list, it goes back to displaying that item as before; if the user selects another item in the list, it displays only that item; clicking again on that item will bring back the same list but with the highlighting on the newly selected item.
The item component has 3 variants: default, hovered on, selected. The hovering interaction is placed there.
The menu is build from 5 instances of this component, with all possible variants of what item is selected and is the menu “open” or “closed”:
As you can tell from the image above, clicking on a selected item brings up the selected version of the menu with the highlight on said element, and clicking on any other item in an Opened menu variant goes to that element. The menu variants featuring the selected element with the menu being “closed” are all just turning off the visibility of the non-selected items.
Unfortunately, the behavior I end up with on an instance of that menu component is incomprehensible, as some elements stay visible while others don’t: https://www.figma.com/proto/2phy2GjUOoqKDdhGMVMWxE/NavCanada?page-id=0%3A1&node-id=66%3A1717&viewport=-2882%2C4624%2C4&scaling=min-zoom