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
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
[
# base classes
lib/music_library_web/components/layouts/app.html.heex
+24 -64
View File
@@ -73,78 +73,38 @@
/>
</.button>
</:toggle>
<.dropdown_link
href={~p"/scrobble"}
class={[
"rounded-none border-l-2",
if(@current_section == :scrobble,
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
<.dropdown_nav
current_section={@current_section}
section={:scrobble}
route={~p"/scrobble"}
icon="hero-play"
>
<.icon
name="hero-play"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Anything")}
</.dropdown_link>
<.dropdown_link
href={~p"/scrobbled-tracks"}
class={[
"rounded-none border-l-2",
if(@current_section == :scrobble_activity,
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
</.dropdown_nav>
<.dropdown_nav
current_section={@current_section}
section={:scrobble_activity}
route={~p"/scrobbled-tracks"}
icon="hero-musical-note"
>
<.icon
name="hero-musical-note"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobbled Tracks")}
</.dropdown_link>
<.dropdown_link
href={~p"/scrobble-rules"}
class={[
"rounded-none border-l-2",
if(@current_section == :scrobble_rules,
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
</.dropdown_nav>
<.dropdown_nav
current_section={@current_section}
section={:scrobble_rules}
route={~p"/scrobble-rules"}
icon="hero-adjustments-horizontal"
>
<.icon
name="hero-adjustments-horizontal"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Scrobble Rules")}
</.dropdown_link>
<.dropdown_link
href={~p"/online-store-templates"}
class={[
"rounded-none border-l-2",
if(@current_section == :online_store_templates,
do: "border-l-red-500",
else: "border-l-transparent"
)
]}
</.dropdown_nav>
<.dropdown_nav
current_section={@current_section}
section={:online_store_templates}
route={~p"/online-store-templates"}
icon="hero-building-storefront"
>
<.icon
name="hero-building-storefront"
class="h-4 w-4 mr-2"
aria-hidden="true"
data-slot="icon"
/>
{gettext("Online Store Templates")}
</.dropdown_link>
</.dropdown_nav>
<.dropdown_separator />
<.dropdown_link href={~p"/dev/dashboard"}>
<.icon