Creating a slide out panel/menu

Plasmic Studio Questions
1

Is there a tutorial on slide out panels/menu? I set a variant for the panel that can show/hide on click. I’m using the reveal component that makes it slide in but it doesnt slide back out. Any suggestions on how to achieve this?

2

Are you able to use the built-in layout component? This is used by default in new app starters. It includes a configuration where you can switch it to being a left side bar instead of a top bar, and that sidebar slides out on narrower screens.

That would be the simplest approach. But if you need more customization and or need to design your own, then you can do the following

Create a component for your sidebar
In the base variant, design what it looks like expanded
Create a collapsed variant where you style the sidebar to have a narrower fixed width
Set a transition style so that switching between these variants animates the width

Let me know if that makes sense

3

Hi Yang, sorry for cutting in but can you elaborate more on this step. I am struggling to make the transition works. Wishing if there is an example showing how it should be set.
Set a transition style so that switching between these variants animates the widt

4

https://m.youtube.com/watch?v=ykE8AcvEPUQ

5

thank Yang. So it has to be css-variant to make it work right. If I am using toggle with state variables, will it work though?

6

Any variant

7

got it, let’s me try it out. Thank you.

8

@yang Hey i dont see width being a selection to animate in the transition list

9

We only list the properties that are hardware accelerated, but if you switch to all, then it should include width

10

Does that work in the plasmic studio preview? I have set it to all but doesnt seem to be applying.

11

There is one caveat which is that width and height cannot animate to and from Auto, which includes stretch and hug. It can only animate between two numeric values

12

Usually this is fine for something like a sidebar, but if you have Auto sized content, that’s not yet possible without custom code snippets

13

i figured that might be the case and tested with 2 defined sizes but still doesnt show

14

ok so it does work within the interactive toggle but not in preview in a new tab

15

thanks ill be testing it there instead

16

Oh interesting! Would you mind sharing the link to that component or page? We can take a look

17

https://studio.plasmic.app/projects/q5hJJtz5ztf6iJm54BMD9v/-/Dashboard?arena_type=focusedframe&arena=T1a3gqUJwC

18

@calm_rooster Do you have more info on what I should be looking at or trying? I am not sure which element is supposed to be animating, I tried clicking around on a few things

19

the component is called SidePanel with a variant called isOpen

20

thats where the transition is