Sidebar menu best practices

Ask us anything How do I?
1

Hi all,

I’m using the built-in Side Menu element and corresponding Content section. I have two questions:

  1. We will have user roles that will determine which pages users have access to. This should of course be reflected in the navigation. What is best practice for handling this? Currently we have separate “home” pages for each user role with their corresponding side menu but that doesn’t really work since it would mean having multiple versions of each page to which more than one role has access to. Is conditional rendering the answer?

  2. The side menu currently sticks to the left side of the window no matter what. I would like it to follow a certain max width and have blank space beyond that whenever the window exceeds that width. How can this be done with the OOTB Side Menu section in WeWeb?

Thank you!

2

  • Take the OOTB sidemenu

  • Bind the following to the ‘Menu’ div Margin: "0px 0px 0px max(calc((100vw - 1440px + 32px) / 2), 20px)"
    image

    image
    image770×624 50.9 KB

  • Apply the following custom CSS on the ‘Content’ section margin-left: max(calc((100vw - 1440px + 600px + 32px) / 2), 300px); margin-right: max(calc((100vw - 1440px + 32px) / 2), 20px);
    image

Note: 1440px is the max width defined if you want to change it

3

This is great, thank you!

Any thoughts on #1?

4

Conditional rendering with linked sections is way to go

5

Great, thank you. Just to clarify, do you mean have a number of side menu sections and use conditional rendering to only show the one that matches the user role, or a single side menu section but conditional rendering on the links within the menu to only show links to pages the user can access? Is there any performance difference between these two options? Thanks!

6

It depends how different the menus are, if they are fairly similar with different links use one section and conditionally change content inside the section

7

Got it, thank you!