local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 72 Pull requests 5 Projects 4 Releases Packages 1 Activity Actions

feat: adjust display of submenu

Browse source
This commit is contained in:
Simon 2026-01-16 13:53:31 +01:00
parent d6173571b5
commit c3515b4105
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
2 changed files with 54 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

67
lib/mv_web/components/layouts/sidebar.ex
View file

@ -81,7 +81,7 @@ defmodule MvWeb.Layouts.Sidebar do
icon="hero-currency-euro"
label={gettext("Fee Types")}
/>
<!-- Nested Admin Menu -->
<.menu_group icon="hero-cog-6-tooth" label={gettext("Administration")}>
<.menu_subitem href={~p"/users"} icon="hero-user-circle" label={gettext("Users")} />
@ -123,43 +123,38 @@ defmodule MvWeb.Layouts.Sidebar do
defp menu_group(assigns) do
~H"""
<li role="none" class="menu-group">
<!-- Expanded Mode: Details/Summary -->
<details class="expanded-menu-group">
<summary
class="flex items-center gap-3 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
role="menuitem"
aria-haspopup="true"
>
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
<span class="menu-label">{@label}</span>
</summary>
<ul role="menu" class="ml-4">
{render_slot(@inner_block)}
</ul>
</details>
<!-- Collapsed Mode: Dropdown -->
<div class="collapsed-menu-group dropdown dropdown-right">
<button
type="button"
tabindex="0"
class="flex items-center w-full p-2 rounded-lg hover:bg-base-300 tooltip tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
data-tip={@label}
aria-haspopup="menu"
aria-label={@label}
>
<.icon name={@icon} class="size-5" aria-hidden="true" />
</button>
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2 focus:outline-none"
role="menu"
>
<li class="menu-title">{@label}</li>
{render_slot(@inner_block)}
</ul>
<!-- Expanded Mode: Always open div structure -->
<li class="expanded-menu-group">
<div class="flex items-center gap-3">
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
<span class="menu-label">{@label}</span>
</div>
<ul role="menu" class="ml-4">
{render_slot(@inner_block)}
</ul>
</li>
<!-- Collapsed Mode: Dropdown -->
<div class="collapsed-menu-group dropdown dropdown-right">
<.link
type="button"
tabindex="0"
class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-300 tooltip tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
role="menuitem"
data-tip={@label}
aria-haspopup="menu"
aria-label={@label}
>
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
</.link>
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2 focus:outline-none"
role="menu"
>
<li class="menu-title">{@label}</li>
{render_slot(@inner_block)}
</ul>
</div>
"""
end