Forum Academy Marketplace Showcase Pricing Features

Progressive App Design / New Responsive Engine

With the new responsive engine, app design should be greatly improved.
Previously I had designed an app for a client as such:
Index
—top menu
— wrapper
— | app (logged out view)
—— | logged out elements (landing page)
—— | bbs (logged in view)
——— | logged in elements (user profile, events page etc)

this has ended up being cumbersome and confusing. to add to it, i have a “top menu” element that goes in the index page that i have to then create a workflow that “pings” the index then wrapper then app then bbs so then the bbs can show/hide the proper elements.

the new app design i’m thinking of is
index
—top menu
—app
—— | wrapper
—— | logged out group (landing page etc)
—— | logged in group (bbs)

the wrapper no longer needs to be a parent element as its width is easily collapsible with the new responsive engine.

should i even bother with having a parent logged in and logged out group when i can simply place a conditional statement on each logged in element “when current user is logged out hide element”?

i thought grouping all logged in elements together would make for safer design to prevent a logged out user from accessing these elements, but now I’m thinking the lest groups the better , this would make it easier for others (for example the client/app owner) to edit & navigate the app.

so then the simplest design appears to be:

index
—top menu
—app
—— | wrapper
——| element1
—— | element2
—— | …
—— | elementN

actually i would like to move the top menu inside the app element, but was unable to previously as it is a floating element…

i want to take maximum advantage of flexbox as it really feels logical and “clean”