Use dropdown for "more" link in the nav

lib/music_library_web/components/core_components.ex

@@ -22,6 +22,10 @@ defmodule MusicLibraryWeb.CoreComponents do
   defdelegate badge(assigns), to: Fluxon.Components.Badge
   defdelegate button(assigns), to: Fluxon.Components.Button
   defdelegate date_time_picker(assigns), to: Fluxon.Components.DatePicker
+  defdelegate dropdown(assigns), to: Fluxon.Components.Dropdown
+  defdelegate dropdown_button(assigns), to: Fluxon.Components.Dropdown
+  defdelegate dropdown_link(assigns), to: Fluxon.Components.Dropdown
+  defdelegate dropdown_separator(assigns), to: Fluxon.Components.Dropdown
   defdelegate input(assigns), to: Fluxon.Components.Input
   defdelegate label(assigns), to: Fluxon.Components.Form
   defdelegate loading(assigns), to: Fluxon.Components.Loading

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

@@ -39,12 +39,13 @@
           </.link>
         </div>
       </div>
-      <div class="flex space-x-2 md:space-x-4">
+      <div class="flex space-x-2 md:space-x-4 items-center">
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/dashboard"}>
+        <.dropdown label={gettext("More")}>
+          <.dropdown_link href={~p"/dev/dashboard"}>
             <.icon name="hero-chart-bar" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
             {gettext("Live Dashboard")}
-        </a>
+          </.dropdown_link>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/errors"}>
+          <.dropdown_link href={~p"/dev/errors"}>
             <.icon
               name="hero-exclamation-circle"
               class="h-4 w-4 mr-2"
@@ -52,12 +53,12 @@
               data-slot="icon"
             />
             {gettext("Errors")}
-        </a>
+          </.dropdown_link>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/oban"}>
+          <.dropdown_link href={~p"/dev/oban"}>
             <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
             {gettext("Oban")}
-        </a>
+          </.dropdown_link>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/backup"}>
+          <.dropdown_link href={~p"/backup"}>
             <.icon
               name="hero-archive-box-arrow-down"
               class="h-4 w-4 mr-2"
@@ -65,8 +66,9 @@
               data-slot="icon"
             />
             {gettext("Backup")}
-        </a>
+          </.dropdown_link>
-        <a class={nav_link_classes()} } href={~p"/login"}>
+          <.dropdown_separator />
+          <.dropdown_link href={~p"/login"}>
             <.icon
               name="hero-arrow-left-start-on-rectangle"
               class="h-4 w-4 mr-2"
@@ -74,7 +76,8 @@
               data-slot="icon"
             />
             {gettext("Logout")}
-        </a>
+          </.dropdown_link>
+        </.dropdown>
       </div>
     </div>
   </div>

priv/gettext/default.pot

@@ -815,3 +815,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Warning!"
 msgstr ""
+
+#: lib/music_library_web/components/layouts/app.html.heex
+#, elixir-autogen, elixir-format
+msgid "More"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -815,3 +815,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Warning!"
 msgstr ""
+
+#: lib/music_library_web/components/layouts/app.html.heex
+#, elixir-autogen, elixir-format
+msgid "More"
+msgstr ""