How to best utilise Boolean variables in prototyping?

I feel like I’m going to break my brain thinking about this, so I’d be super curious to hear how others are handling their prototypes.

Our design system provides an “app launcher” component consisting of a button and a dropdown menu. The app launcher has a property “Is open” that can be either true or false. Other elements have the same type of property – on a page with several dropdowns and menus you can have dozens of components that are either open or closed.

What I do want: All the components that have an “Is open” property close on click anywhere on the screen that isn’t one of the components.
What I don’t want: All the components that have an “Is open” property open on click on any one of them.

What works is to create a Boolean for each component – “App launcher is open” (true/false), “Personal menu is open” (true/false), “Honorific selection is open” (true/false) and so on. Then I can create an on-click event for the entire page to set all these to false. However I also need to create on-clicks for every single component to set every other component’s “Is open” variable to false.

E.g. Component: App launcher
On click: “App launcher is open” == true
PLUS “Personal menu is open” == false
PLUS “Honorific selection is open” == false

PLUS
Screen: Customs form
On click: “App launcher is open” == false
PLUS “Personal menu is open” == false
PLUS “Honorific selection is open” == false

Is there any more efficient way of doing this that I’m not seeing?

Hey @Vincent_Schlothauer, thank you for reaching out! I’ve shared this internally with the team. Once I get a response, I’ll update you. Appreciate your patience!

Hey @Vincent_Schlothauer, apologies for the delayed response!

I’ve got the following recommendation from the team:

Given the ‘only one can be opened’

  • One interactive component that has the individual states for the menu as individual variants.
  • One variable that changes the entire state of the menu to opened/closed.

That way you reduce the need for so many state variables.

Please let me know if this helps or if you have any further questions!