Background:
- I am designing a simple sidebar for a website that can open and close.
- The sidebar contains element representing the different pages
- Each element can be active or not. When active, the color changes to blue
Actors:
- Sidebar Elements:
as described in the top right panel, each variant is either active or not, and either open or closed. - Sidebar:
The Sidebar can be either open or closed - Full prototype:
As you can see, I only set the variant state to “active” directly in the prototype, so I only keep the parent component outside of the prototypes
Problem:
- When I close the sidebar, the instance swap “color” goes back to the default value
- I could create different Variants, one for each page, but I want to keep it easy and to the least number of variants possible.
-
As mentioned before, I could create one variant for each page with the element set to active both in the open and closed state, but it would lead the file to be messy and crowded