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} />