I want to create a drawer on the left side of my application that contains filters. I do not want it to be a modal that is on top of my main section; rather, I want it to be a drawer that sits next to my main section and can open and close. It also does not span to the top of the screen but sits in a section below the top nav menu. Something like this.
Both the sidemenu and “drawer” components in WeWeb both are designed to sit on top of existing content. In a few places in the WeWeb community, I’ve seen the advice that in my case you should use a sidemenu or drawer, and then change the margin of the main content area to compensate for the width of the drawer. But it seems like best practice would actually be to have the sidebar be a flexbox next to the center area flexbox. The sidebar gets a fixed pixel value of 250px or so when opened, and the center flexbox takes up 100% of whatever space is left.
I’m not a designer, so I like to use existing components where I can. And I don’t want to muck around with breakpoints for mobile and tablet more than I have to. Knowing the parameters I’ve given so far, what is the best way for me to approach this?
I don’t think there is a component that will just work like you want it to without needing to have some breakpoint changes to look nice in both Mobile/Desktop.
Realistically, what you’d do is design it first for desktop. Add a container to the left of your table and bind conditional rendering to that container with a variable you define, likely a Boolean. Then use a button that toggles the boolean to true/false which will then enable/disable the drawer.
Hey kenboer,
I’m implementing something similar right now.
It’s a simple flexbox layout where the left side (content) grows and the right one has fixed width. Button triggers a variable update - changing the width of the right container from 0 to 250px and back to 250px (+overflow: hidden to hide the content).
