cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract dropdown_nav/1 component in Layouts

Browse Source
This commit is contained in:
Claudio Ortolina
2026-03-16 11:13:45 +00:00
parent d59ee157db
commit 4a2b7f4e03
2 changed files with 49 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/layouts.ex
+25
View File
@@ -37,6 +37,31 @@ defmodule MusicLibraryWeb.Layouts do
""" """
end end
attr :current_section, :atom, required: true
attr :section, :atom, required: true
attr :route, :string, required: true
attr :icon, :string, required: true
slot :inner_block, required: true
def dropdown_nav(assigns) do
~H"""
<.dropdown_link
href={@route}
class={[
"rounded-none border-l-2",
if(@current_section == @section,
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
>
<.icon name={@icon} class="h-4 w-4 mr-2" aria-hidden="true" data-slot="icon" />
{render_slot(@inner_block)}
</.dropdown_link>
"""
end
defp toast_class_fn(assigns) do defp toast_class_fn(assigns) do
[ [
# base classes # base classes
lib/music_library_web/components/layouts/app.html.heex
+24 -64
View File
@@ -73,78 +73,38 @@
/> />
</.button> </.button>
</:toggle> </:toggle>
<.dropdown_link <.dropdown_nav
href={~p"/scrobble"} current_section={@current_section}
class={[ section={:scrobble}
"rounded-none border-l-2", route={~p"/scrobble"}
if(@current_section == :scrobble, icon="hero-play"
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
> >
<.icon
name="hero-play"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Anything")} {gettext("Scrobble Anything")}
</.dropdown_link> </.dropdown_nav>
<.dropdown_link <.dropdown_nav
href={~p"/scrobbled-tracks"} current_section={@current_section}
class={[ section={:scrobble_activity}
"rounded-none border-l-2", route={~p"/scrobbled-tracks"}
if(@current_section == :scrobble_activity, icon="hero-musical-note"
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
> >
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")} {gettext("Scrobbled Tracks")}
</.dropdown_link> </.dropdown_nav>
<.dropdown_link <.dropdown_nav
href={~p"/scrobble-rules"} current_section={@current_section}
class={[ section={:scrobble_rules}
"rounded-none border-l-2", route={~p"/scrobble-rules"}
if(@current_section == :scrobble_rules, icon="hero-adjustments-horizontal"
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
> >
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")} {gettext("Scrobble Rules")}
</.dropdown_link> </.dropdown_nav>
<.dropdown_link <.dropdown_nav
href={~p"/online-store-templates"} current_section={@current_section}
class={[ section={:online_store_templates}
"rounded-none border-l-2", route={~p"/online-store-templates"}
if(@current_section == :online_store_templates, icon="hero-building-storefront"
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
> >
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")} {gettext("Online Store Templates")}
</.dropdown_link> </.dropdown_nav>
<.dropdown_separator /> <.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}> <.dropdown_link href={~p"/dev/dashboard"}>
<.icon <.icon