How would you recommend structuring slightly more complex page layouts?
Ive been roaming the elixir forums for a bit, but I cant really decide on how to continue.
There was an example for a page layout like this, but id did not help me
what i would like to achieve is:
---------------------------------------- | top_menu | ---------------------------------------- | | | | side | | | nav | main | | | | | | |
top_menu allows navigation between different categories (e.g. ‘profile’, ‘timeline’, ‘messages’, …). It does not need to change between pages.
So if a user selected e.g. ‘messages’, a
side_nav specific to messages should be printed that contains a list of chat partners. The
main area then displays the content of whatever chat was selected in
What I tried
I was able to build a setup like this doing the following:
- add the
- each menu entry does a live_redirect.
- live views load the
side_navas a component. Each item in the nav does a live_patch with different live_actions.
- live views load a component to
main, depending on the live action.
This way, I get
- the page layout I wanted
- one live view per item in the
top_menuthat i can store in a separate folder with all its components
- All routes are visible in the router and the url is updated properly
The top menu should have a sign in/out button, depending on wether a user is signed in or not.
It seems I cannot get that information in the live.html.leex template. To get this information, I need access to the session and therefore a live view.
My first approach was to put the
top_menu into a separate component and render it in every live view.
However, this introduces duplication, cause I will have to determine wether a user is signed in or not separately on every live view.
The second thought, that I cant quite wrap my head around, is to use a live view for the
top_menu and then another live view for
main. That way, I only need to check the login state on the first live view.
How would you structure a page that has a top menu with login/out button?
I cannot really see how the setup with a parent and multiple child live views would be achieved. Could you maybe help me here by pointing me to an example?
Do any of my approaches or thoughts make sense or am I way off the track?