I’m currently trying to create a left-hand nav bar component that contains primary buttons, with one of these being a dropdown that offers two more secondary clickable nav buttons. I want all these buttons to have three separate states, base, hover, and clicked. I’ve been able to figure out how to do this for the primary buttons by creating a component for each nav button and turning it into a slot target so that the state isn’t applied to all pages. Meaning, if I have a ‘Home’ and a ‘Search’ page, my global nav sidebar component can showcase both in a clicked state for their respective pages without showing on each others’. Here are my screenshots showing this in action, along with my global sidebar component and nav button components:
However, the issue I’m running into is how to replicate this for a dropdown with the secondary buttons. I created a component for the dropdown button specifically since I started off by having it toggle between opening and closing when clicked (i.e., showing and hiding the two secondary buttons called ‘My Storage’ and ‘Shared With Me’). This has worked just fine. The issue arises when I go to apply the same principles as I did to the primary buttons and turn the secondary buttons into slot targets to toggle them to the clicked state, they do not follow the same rules and will remain the same. Meaning if I toggle ‘My Storage’ to clicked, and create a new page to toggle it off and turn ‘Shared With Me’ on, the state is a global change across all of my global sidebar components. I’ve even tried creating subgroups with states for each secondary buttons in the clicked state to see if this worked as a way around the issue, which it did but then it affects the ability to open and close the primary dropdown container. I’ve attached screenshots of my nav button dropdown component.
I may be using the feature of slot target wrong since I’m new to Plasmic. Any help is GREATLY appreciated!!!