i’m currently trying to have my content expand to fit the page when my side menu collapses. For some context i’ve created a collapsable side menu which is bound to a width variable, see image below.
My issue is that i’m unable to get the content to expand (header and content containers) when the side bar is in it’s collapsed state. I’ve tried everything from creating a variable for the header and trying to bind it to the side menu’s collapsed state but it’s not functioning correctly
The header also has a margin of 280px assigned to it too so i’m wondering if the issue is that I need a variable for the margin too? could someone give me some advice and examples of how to do this and ensure that when the header is expanded all of the internal div and search bar line up correctly as well as the margin.
If you are using an element that overlaps other elements (Drawer, Sidebar Menu…) you will need a variable to give margin to the left so that when the element is expanded the margin is placed at the same time.
If the element is a common container, you can just work with a variable for the width of the container itself. To do this, the other container must be set to automatic width and sizing to “expanded”.
Basically you will change the concept: instead of moving the width of the menu, you will alternate between opening and closing the menu and at the same time adding and removing the margin on the main element. You can do this only on the parent element (section), as you are using an element that overlaps the other elements, which is why you need to make the margin dynamic.
DISCLAIMER: In the video, the margin is set to 0px and closing the Side Menu. In your case, you just need to set the variable to 80.
