I’m working on an app and wanted the navbar to use a liveview or a live component.
Since I rather not duplicate the code, I’ve tried putting the navbar liveview on root.html.leex and it seem to render fine and working.
However, when I went on to test flashes, I supported that flashes will show both above the navbar and in the main body as well.
Turns out that live.html.leex is being rendered twice, one that wraps the navbar, and the other wrapping the body. Here’s a screenshot for reference
I’ve thought of trying using live component as well but since the root template doesn’t have @socket, it’s pretty much impossible to render a live component.
Has anyone encountered this before?
Any recommendations to get rid of the flash for the navbar is welcomed.
In your router, in the brower pipeline you can set
pipeline :browser do
plug(:put_layout, {DropShippingWeb.LayoutView, :app})
plug(:put_root_layout, {DropShippingWeb.LayoutView, :root})
end
Basically it will set the default root layout as root.html.leex and the default layout as app.html.eex.
Then, when you need to use live_view (so basically when you don’t have your @conn) you will write things like:
defmodule YourLiveView do
use Phoenix.LiveView, layout: {MyAppWeb.LayoutView, "live.html"}
...
end
Now in the root.html.leex you should put general things, like menus, footer etc.
In the app.html.eex you can simply write your get_flash/2 and in the live.html.leex you ca use @flash.
So what happen when using layout:
in default case : use root layout → use app layout → render the view
when specifying the layout in liveview → use general layout → use live layout → render the view