Add top navigation

lib/music_library_web/components/layouts.ex

@@ -11,4 +11,13 @@ defmodule MusicLibraryWeb.Layouts do
   use MusicLibraryWeb, :html
 
   embed_templates "layouts/*"
+
+  @base_classes "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
+  def nav_link_class(current_section, section) when current_section == section do
+    [@base_classes, "border-zinc-500 text-gray-900"]
+  end
+
+  def nav_link_class(_current_section, _section) do
+    [@base_classes, "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"]
+  end
 end

lib/music_library_web/components/layouts/app.html.heex

@@ -1,3 +1,20 @@
+<nav class="bg-white shadow">
+  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+    <div class="flex h-16 justify-between">
+      <div class="flex">
+        <div class="ml-6 flex space-x-8">
+          <!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+          <a href="/" class={nav_link_class(assigns[:nav_section], :dashboard)}>
+            Dashboard
+          </a>
+          <a href={~p"/records"} class={nav_link_class(assigns[:nav_section], :records)}>
+            Records
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>
 <main class="px-4 py-20 max-sm:py-4 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-5xl">
     <.flash_group flash={@flash} />

lib/music_library_web/controllers/stats_controller.ex

@@ -6,6 +6,6 @@ defmodule MusicLibraryWeb.StatsController do
   def index(conn, _params) do
     records_count = Records.count_records()
     record = Records.get_latest_record!()
-    render(conn, :index, records_count: records_count, record: record)
+    render(conn, :index, records_count: records_count, record: record, nav_section: :dashboard)
   end
 end

lib/music_library_web/controllers/stats_html/index.html.heex

@@ -1,6 +1,4 @@
 <div>
-  <h1 class="text-base font-semibold leading-6 text-gray-900">Music Library</h1>
-
   <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
     <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
       <dt>

lib/music_library_web/live/record_live/index.ex

@@ -25,6 +25,7 @@ defmodule MusicLibraryWeb.RecordLive.Index do
 
     {:ok,
      socket
+     |> assign(:nav_section, :records)
      |> assign(:record_list_params, record_list_params)
      |> stream(:records, records)}
   end

lib/music_library_web/live/record_live/show.ex

@@ -12,6 +12,7 @@ defmodule MusicLibraryWeb.RecordLive.Show do
   def handle_params(%{"id" => id}, _, socket) do
     {:noreply,
      socket
+     |> assign(:nav_section, :records)
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(:record, Records.get_record!(id))}
   end