Hi,
Is it possible to create a collapsable sidebar like below, natively in Weweb (without the need to create a custom sidebar component)
The above element can be a good starting point if you want to achieve a collapsable side menu, but you will need to do some additional work by creating a variable that will control the collapsed/expanded control and then accordingly create states to style it
1 Like
Thanks. I will try it out
Can you elaborate a bit more on how to do that?
You can start by dragging the sidemenu from the ‘Layout’ section. You can delete all the contents and start by creating two divs:
- One that contains all the icons you want to display when it’s collapsed
- Second one containing other information that will show when expanded
From there you need to make a variable that will control whether the menu is expanded or collapsed. You can bind this value to the width of the menu and the display of the second div
I am getting there, I added a toggle icon that sets the openmenu variable true or false. Based on thst I show / hide the menu labels and change the sidebar logo. I will post the result when finished
I’m keen to see more of this in action
Here is my current result
3 Likes
I was able to implement expanding and collapsing on mouse entry/exit like this:
2 Likes
Hi @Dorian , unfortunately the link to your video seems to be broken. Is this video still available?
Hey Julian!
Give this one a try 
Let me know if you need any help as I have implemented a complex collapsable side menu.
2 Likes
Extremely new to this and the video helped a lot not only with the specific task but also showed me new ways to think about setting conditionals for other stuff as well and tying single button to true / false much easier then I am doing it.
My question for the follow up is and I have been trying this for a bit and cant seem to figure it out but what would be a easy way to tie in transition times and effects to this so if you wanted to it takes a bit longer and eases in and out instead of rubber banding? I’ve used your methos not for sidebar but to actually create a collapsible section with a table in it and
I’ve added another line to the variable you showed me how to make and tried multiple ways to tie it into the transition settings for the table but no luck….
Disregard got it, had to add a second state and tied it to the true / false variable with a opacity tweak.video
1 Like
Nice! Thanks for taking the time to share the solution on here. Really appreciate it 