How do I make a dynamic navbar LiveView that is on every page?

byoungdale · August 24, 2022, 9:36pm

I want to have a dynamic LiveView Navbar that is included on every page. I can’t include it in the root because I will need it to be dynamic and update and get events, so it needs to be a LiveView. But, it’s state will be completely separate from the pages the user is visiting. Does that means I need to include a ‘NavBar’ component in every page with live_render?

<%= live_render(@socket, MyApp.NarBar, id: "navbar") %>

And if I do this, does that mean that the NavBar LiveView will re-render/mount on every change between pages with live_redirect or live_patch?

cmo · August 24, 2022, 9:49pm

Look into putting in the live.html.heex like they do in live beats. I recently tried every which way of doing it and settled in doing it in the same fashion. With on_mount hooks it is clean.

Your options are: a sticky live view, a non sticky live view, a live component or function component you include on every page, or in the template.

github.com

fly-apps/live_beats/blob/master/lib/live_beats_web/templates/layout/live.html.heex

<div
  id="mobile-sidebar-container"
  class="fixed inset-0 flex z-40 lg:hidden"
  aria-modal="true"
  style="display: none;"
  role="region"
>
  <div class="fixed inset-0 bg-gray-600 bg-opacity-75" phx-click={hide_mobile_sidebar()}></div>

  <div
    id="mobile-sidebar"
    class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white hidden min-h-screen"
  >
    <div class="absolute top-0 right-0 -mr-12 pt-2">
      <button
        type="button"
        id="hide-mobile-sidebar"
        aria-expanded="true"
        aria-controls="mobile-sidebar"
        class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"

This file has been truncated. show original

github.com

fly-apps/live_beats/blob/master/lib/live_beats_web/live/nav.ex

defmodule LiveBeatsWeb.Nav do
  import Phoenix.LiveView

  alias LiveBeats.{Accounts, MediaLibrary}
  alias LiveBeatsWeb.{ProfileLive, SettingsLive}

  def on_mount(:default, _params, _session, socket) do
    {:cont,
     socket
     |> assign(active_users: MediaLibrary.list_active_profiles(limit: 20))
     |> assign(:region, System.get_env("FLY_REGION") || "iad")
     |> attach_hook(:active_tab, :handle_params, &handle_active_tab_params/3)
     |> attach_hook(:ping, :handle_event, &handle_event/3)}
  end

  defp handle_active_tab_params(params, _url, socket) do
    active_tab =
      case {socket.view, socket.assigns.live_action} do
        {ProfileLive, _} ->
          if params["profile_username"] == current_user_profile_username(socket) do

This file has been truncated. show original

byoungdale · August 25, 2022, 3:54pm

Thank you! That is super helpful. I keep forgetting to go to live_beats for reference.