Hey WeWeb folks, I’m curious why only sections can be linked symbols.
To make a classic left-sidebar and main-content layout, you need to be able to have a container with flexbox and sidebar/main inside of it. This is not possible with section elements. But then you can’t make your sidebar a linked symbol, which means you don’t get SPA functionality.
Can anyone from the WeWeb team shed some light on why this is the case? What would you expect someone do to here?
I’m aware that you can use the Sidemenu component, but in my case, I want a top nav for the main app navigation, and a side nav for a multi-page edit section. This seems to not be possible.
Hi, its a current technical limitation. In the near future we will release a new reusable component system allowing you to build nocode component. With that you should be able to create a Layout component and keep every instance in sync with it.
For now, you will have to play with the linked sections to achieve your layout. The sidemenu component is built on top of the modal component, you can create your own sidebar positioned leftside, you will have to constraint your main content left-margin/padding so it start at the sidebar end.
Check the dashboard template for an example. You can convert both the header and the sidemenu to a linked section
Thanks @Alexis. Looking forward to layout components!
To clarify, I don’t need my side nav to be like the sidemenu component (e.g. turn into a hamburger menu). I just want to make sure it has SPA features so the page reloading is seamless. It sounds like, right now, the only way to ensure SPA functionality is to use a symbol, correct?
Yes I understand you don’t need this feature, this is why I wanted to share with you how the sidebar is built as a section so you can create one that fit your needs yourself. You can use the modal component, its a section so its linkable and you can position it freely on the left side of your app.
But you will have to create another section for your content that start at the end of the sidebar (by playing with margin or padding left)
@Alexis I got this working, but I strongly request that WeWeb prioritizes a better way to do this.
The modal component only allows for position: absolute/sticky, which means it’s nearly impossible to do good UX responsive design on this. On mobile sizes, you cannot make the nav scroll with the page, because it’s sticky. (Apparently you also can’t write custom CSS on a section/modal, to take off the position absolute.) You also have to set the main content to have a top (or bottom) margin so that it doesn’t overlap, but of course you may not know the height of the nav, if the number of items inside are variable. It’s also generally considered a bad CSS practice to set fixed widths and use margin to place a sidebar/main content together. Grid or flexbox would be much preferable.
