Implementing a sidebar and main content view LiveView

Phoenix Forum Questions / Help
,
1

Hi, I’m struggling with some basic navigation using LiveView; and the more examples and doc I read, the more confused I get. My project is in Phoenix v.1.7, and what I’m trying to implement is a layout for the whole application with a left navigation sidebar and a main content area. Sidebar needs to show navigation links, as well as user information and some live notifications count. The main content area is for LiveView pages.

So far, I have been trying defining my layout in app.html.heex as:

<div class="flex flex-no-wrap">
  <nav>
    <.live_component module={MyAppWeb.NavLive.SidebarComponent} id="mySidebar" />
  </nav>
  <main class="container mx-auto py-10 h-64 md:w-4/5 w-11/12 px-6">
    <div class="w-full h-full">
      <.flash_group flash={@flash} />
      <%= @inner_content %>
    </div>
  </main>
</div>

My Sidebar is a live component:

defmodule MyAppWeb.NavLive.SidebarComponent do
  use MyAppWeb, :live_component
  ...

My current implementation renders when the Sidebar is made only of HTML code; but, I’m struggling on how to access the @current_user information inside the live component.

Should I convert the sidebar to a LiveView instead?

I know that similar questions have been asked many times but I’m lost about the correct way to implement this in v1.7. LiveView, LiveComponent, Component, FunctionComponent, too many options and most of the examples are not helping because they are for <v1.6.

2

You need to pass through whatever assigns you need to the live component, so assuming your current_user assign is set correctly in your live view, that would look something like this:

<.live_component module={MyAppWeb.NavLive.SidebarComponent} id="mySidebar" current_user={@current_user} />

For an example of a full app, I am using a live component for sidebar navigation in here, although things are a bit more complicated because it’s a library where the nav component itself can be overridden. If you have any questions about how it’s put together feel free to DM me.

1 Like
3

Thank you, @tfwright! I’m going to re-visit LiveComponent’s documentation. I tried some weird stuff before injecting the current_user inside the on_mount function of the Sidebar. I appreciate your assistance.