CODEWITHSUNDEEP
http-headerselixirphoenix-frameworkphoenix-live-view
Daryl Spitzer
Daryl Spitzer

Reputation: 149554

How do I mix live and "dead" content in my Elixir Phoenix LiveView app header?

I changed my root.html.heex file to look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <%= @inner_content %>
  </body>
</html>

And moved the <header> element to be duplicated in app.html.heex:

<header>
  <section class="container w-full m-5 p-3 bg-blue-200 text-blue-600 text-5xl font-bold">
    <div class="text-2xl">
      <a href="/">
        <img class="float-left mt-1"
          src={Routes.static_path(@conn, "/images/logo.png")} alt="LOGO"/>
        <span class="flex text-4xl hover:text-blue-800">
          <span class="font-medium nomargin">WEBSITE</span>
        </span>
      </a>
      <span class="float-right flex -mt-8 font-normal">
        <nav role="navigation">
          <%= render "_user_menu.html", assigns %>
        </nav>
      </span>
    </div>
  </section>
</header>
<main class="container">
  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
  <%= @inner_content %>
</main>

...and in live.html.heex.

But I can't render "_user_menu.html" in live.html.heex because (of course) it uses @current_user.

Is there a trick that allows me to somehow have live content on the float-left side of the header and the "_user_menu.html" fragment on the float-right side?

Upvotes: 5

Views: 1162

Answers (1)

silverdr
silverdr

Reputation: 2182

Generally if you need to mix "Live" and "Dead" views/templates, there is live_render/3 documented here. Been there, seen that [working] ;-)

Upvotes: 3

Related Questions