Base app structure - Menu on the left, content on the right

Need help App Organization
1

Hello

This is basic question but somehow cannot find good answer…
how to build basic visual structure of app…

i would like to have something simple like that:

image
image934×578 7.33 KB

so kind of menu on the left with several options … and when clicking any Menu option - different content (subpage?) would be displayed on the right…

is there any tutorial how to do it ?

Thanks
M.

2

Here is how I would approach it:

  1. Add two groups (one for the menu, one for the main content area)
  2. When a user clicks a menu option, you’ll set a state to that menu group (Set state text -> Menu option)
  3. Now in the main content area, set the visible content visible when state of menu group = menu option)

Hope that helps, let me know if you need more info.

1 Like
3

I would make the menu a reusable element. That way you can put it on every page and then have the page content to the right. That would be for a multipage app.

1 Like
4

Thanks for quick answers!

@Nocodify
but then on the right main content area - i should just put several different groups and display them based on the state set - correct?
this seems doable - i will give it a try.
Just another question - if i have many - lets say 10 - different content items (subpages) and all are relatively big with many elements - should I just put them one after another on the content area?
this would be hard to read i guess - just wondering what is best practice here

@msamandadianne - oh so this is different idea - right? so I would need to create multiple pages with similar structure and reuse left menu on every one. This would solve “readability” in case of many subpages…

OK i think i just need to experiment with both approaches

Thanks again!

5

Yep!

Not quite sure what you mean here. I’d put the different groups on top of each other, and then just show them with states. Again, if it makes sense to use groups, go ahead and do that, but sometimes navigating to a new page would make more sense. So then your menu would be a reusable element.

1 Like
6

What I meant (with those 10 subpages) was - how would it be readable in editor… but yeah as you said - i can put them on top of each other and switch between…

Thanks again - now i have material to experiment with!

7

I have one more question. So i made it work in single page with states… but…

i have 5 menu items on left - and 5 groups on right side
on click on menu i set the state of group (on right) to yes and it is displayed properly.

but then - when i click another menu item - i need to set state of another group… but disable state of previously displayed group

is there a way to unset all states from all group ? or maybe some other more efficient way

8

For any menu item, make sure it’s setting the state on the SAME element, that way there can only be one state active at a time.

So the best option here would be to set the state of the group with all the menu items inside.

9

Regarding the states for menu.

I usually create a state for the whole page called “menu”.

I will then set all groups to not visible on load. Then each group just has a condition “when my page’s menu is ‘settings’ this group is visible (checked)”

Then you just need a final workflow to set initial group state on page load. You can always send a parameter to the page as well to be able to set a different group on load.

10

You could have them one on top of each other but make sure that the group containing them is set to collapse height when hidden.