Use live navigation between sections

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

@@ -3,15 +3,21 @@
     <div class="flex h-16 justify-between">
       <div class="flex">
         <div class="flex space-x-8">
-          <a href="/" class={section_link_classes(assigns[:nav_section], :stats)}>
+          <.link navigate={~p"/"} class={section_link_classes(assigns[:nav_section], :stats)}>
             <%= gettext("Stats") %>
-          </a>
+          </.link>
-          <a href={~p"/records"} class={section_link_classes(assigns[:nav_section], :records)}>
+          <.link
+            navigate={~p"/records"}
+            class={section_link_classes(assigns[:nav_section], :records)}
+          >
             <%= gettext("Collection") %>
-          </a>
+          </.link>
-          <a href={~p"/wishlist"} class={section_link_classes(assigns[:nav_section], :wishlist)}>
+          <.link
+            navigate={~p"/wishlist"}
+            class={section_link_classes(assigns[:nav_section], :wishlist)}
+          >
             <%= gettext("Wishlist") %>
-          </a>
+          </.link>
         </div>
       </div>
       <div class="flex space-x-8">

priv/gettext/default.pot

@@ -72,13 +72,13 @@ msgstr ""
 msgid "You must be logged in to access this page"
 msgstr ""
 
-#: lib/music_library_web/components/layouts/app.html.heex:10
+#: lib/music_library_web/components/layouts/app.html.heex:13
 #: lib/music_library_web/live/record_live/index.ex:71
 #, elixir-autogen, elixir-format
 msgid "Collection"
 msgstr ""
 
-#: lib/music_library_web/components/layouts/app.html.heex:19
+#: lib/music_library_web/components/layouts/app.html.heex:25
 #, elixir-autogen, elixir-format
 msgid "Logout"
 msgstr ""
@@ -294,7 +294,7 @@ msgstr ""
 msgid "Purchase"
 msgstr ""
 
-#: lib/music_library_web/components/layouts/app.html.heex:13
+#: lib/music_library_web/components/layouts/app.html.heex:19
 #: lib/music_library_web/live/wishlist_live/index.ex:72
 #, elixir-autogen, elixir-format
 msgid "Wishlist"