Collapsing a Cell

Ask the community
,
1

What I’m trying to achieve:

I’m trying to create a Side Bar Menu which when expanded, the main content is next to it, and when collapsed the main content is the full size of the page.

Currently I’m using a Section Grid for this, as the Side Bar needs to be a fixed amount of pixels (not fluid).

The problem:

When I collapse the Side Bar, while it disappears, the main content does not resize to where the Side Bar used to be.

I’ve set the page background to black for this image to show that the Side Bar does collapse.

scrn1
scrn11269×627 12.3 KB

scrn2
scrn21272×630 12.1 KB

export function sideBarExpand_click(event) {
	$w("#sideBar").expand();
		$w("#sideBarExpand").hide();
		$w("#sideBarCollapse").show();
}

export function sideBarCollapse_click(event) {
	$w("#sideBar").collapse();
		$w("#sideBarExpand").show();
		$w("#sideBarCollapse").hide();
}

Product:
Wix Studio

Additional information:
My site was recently moved over from EditorX to Wix Studio

2

You have to use Grid or Cell to keep it responsive. Add Grid or Cell to the Section and change first child’s min/max width to auto and second child’s max width to 1fr.
And
Use onClick event with if else conditions!