Collapsable sidebar to icon bar

[FJP84]

Hi,

Is it possible to create a collapsable sidebar like below, natively in Weweb (without the need to create a custom sidebar component)

[aurelie]

Yes it is, you can have an example here

[luka]

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

[FJP84]

Thanks. I will try it out

[InterviewKey]

Can you elaborate a bit more on how to do that?

[luka]

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

[FJP84]

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

[aarty]

I’m keen to see more of this in action

[FJP84]

Here is my current result

[Dorian]

I was able to implement expanding and collapsing on mouse entry/exit like this:

"Improving the Sidebar Menu Functionality"

[julian]

Hi @Dorian , unfortunately the link to your video seems to be broken. Is this video still available?

[Newtothis]

@julian

Hey Julian!

Give this one a try

Let me know if you need any help as I have implemented a complex collapsable side menu.