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,42 +39,45 @@
           </.link>
         </div>
       </div>
-      <div class="flex space-x-2 md:space-x-4">
-        <a class={["max-sm:hidden" | nav_link_classes()]} } 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>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/errors"}>
-          <.icon
-            name="hero-exclamation-circle"
-            class="h-4 w-4 mr-2"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          {gettext("Errors")}
-        </a>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/dev/oban"}>
-          <.icon name="hero-cog" class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
-          {gettext("Oban")}
-        </a>
-        <a class={["max-sm:hidden" | nav_link_classes()]} } href={~p"/backup"}>
-          <.icon
-            name="hero-archive-box-arrow-down"
-            class="h-4 w-4 mr-2"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          {gettext("Backup")}
-        </a>
-        <a class={nav_link_classes()} } href={~p"/login"}>
-          <.icon
-            name="hero-arrow-left-start-on-rectangle"
-            class="h-4 w-4 mr-2"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-          {gettext("Logout")}
-        </a>
+      <div class="flex space-x-2 md:space-x-4 items-center">
+        <.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")}
+          </.dropdown_link>
+          <.dropdown_link href={~p"/dev/errors"}>
+            <.icon
+              name="hero-exclamation-circle"
+              class="h-4 w-4 mr-2"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Errors")}
+          </.dropdown_link>
+          <.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")}
+          </.dropdown_link>
+          <.dropdown_link href={~p"/backup"}>
+            <.icon
+              name="hero-archive-box-arrow-down"
+              class="h-4 w-4 mr-2"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Backup")}
+          </.dropdown_link>
+          <.dropdown_separator />
+          <.dropdown_link href={~p"/login"}>
+            <.icon
+              name="hero-arrow-left-start-on-rectangle"
+              class="h-4 w-4 mr-2"
+              aria-hidden="true"
+              data-slot="icon"
+            />
+            {gettext("Logout")}
+          </.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 ""