local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 67 Pull requests 7 Projects 3 Releases Packages 1 Activity Actions

Reorder Sidebar Menu entries and smaller fixes #353

Merged
simon merged 7 commits from feature/reorder-sidebar-menu into main 2026-01-19 11:07:44 +01:00
Conversation 1 Commits 7 Files changed 7 +33 -25
3 changed files with 33 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c86ae6aa9d - Show all commits

8
assets/css/app.css
View file

@ -186,14 +186,14 @@
============================================ */
/* Disable all interactive effects on expanded-menu-group header (no href, not clickable) */
.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a) {
.sidebar .menu > li.expanded-menu-group > div:not(a) {
pointer-events: none;
cursor: default;
}
.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):hover,
.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):active,
.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):focus {
.sidebar .menu > li.expanded-menu-group > div:not(a):hover,
.sidebar .menu > li.expanded-menu-group > div:not(a):active,
.sidebar .menu > li.expanded-menu-group > div:not(a):focus {
background-color: transparent !important;
box-shadow: none !important;
cursor: default !important;

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

@ -84,14 +84,13 @@ defmodule MvWeb.Layouts.Sidebar do
<!-- 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")} />
<.menu_subitem href={~p"/admin/roles"} icon="hero-shield-check" label={gettext("Roles")} />
<.menu_subitem href={~p"/users"} label={gettext("Users")} />
<.menu_subitem href={~p"/admin/roles"} label={gettext("Roles")} />
<.menu_subitem
href={~p"/membership_fee_settings"}
icon="hero-currency-euro"
label={gettext("Fee Settings")}
/>
<.menu_subitem href={~p"/settings"} icon="hero-cog-6-tooth" label={gettext("Settings")} />
<.menu_subitem href={~p"/settings"} label={gettext("Settings")} />
simon marked this conversation as resolved
carla commented 2026-01-19 10:23:42 +01:00
Copy link

Nice! I really like the structure and it works also via keyboard for me now.
One idea: should we (low priority as an idea) rename Settings to Memberdata and extract the "Vereinsdaten" in a extra subitem "Verein"--> for branding etc? But more an idea for later :)

Nice! I really like the structure and it works also via keyboard for me now. One idea: should we (low priority as an idea) rename Settings to Memberdata and extract the "Vereinsdaten" in a extra subitem "Verein"--> for branding etc? But more an idea for later :)
simon commented 2026-01-19 11:07:24 +01:00
Copy link

Yeah I'm totally in for rethinking all the settings views and think about what belongs together

Yeah I'm totally in for rethinking all the settings views and think about what belongs together
</.menu_group>
</ul>
"""
@ -124,8 +123,12 @@ defmodule MvWeb.Layouts.Sidebar do
defp menu_group(assigns) do
~H"""
<!-- Expanded Mode: Always open div structure -->
<li class="expanded-menu-group">
<div class="flex items-center gap-3">
<li role="none" class="expanded-menu-group">
<div
class="flex items-center gap-3"
role="group"
aria-label={@label}
>
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
<span class="menu-label">{@label}</span>
</div>
@ -147,7 +150,6 @@ defmodule MvWeb.Layouts.Sidebar do
<.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"
>

34
test/mv_web/components/layouts/sidebar_test.exs
View file

@ -144,7 +144,8 @@ defmodule MvWeb.Layouts.SidebarTest do
assert menu_item_count > 0, "Should have at least one top-level menu item"
# Check that nested menu groups exist
assert html =~ "<details"
assert html =~ ~s(<li role="none" class="expanded-menu-group">)
assert html =~ ~s(role="group")
assert has_class?(html, "expanded-menu-group")
# Check that nested menu items exist
@ -192,8 +193,9 @@ defmodule MvWeb.Layouts.SidebarTest do
html = render_sidebar(authenticated_assigns())
# Check for nested menu structure
assert html =~ "<details"
assert html =~ "<summary"
assert html =~ ~s(<li role="none" class="expanded-menu-group">)
assert html =~ ~s(role="group")
assert html =~ ~s(aria-label="Administration")
assert has_class?(html, "expanded-menu-group")
# Check that nested menu has subitems
@ -208,7 +210,7 @@ defmodule MvWeb.Layouts.SidebarTest do
# There should be more menuitems than data-tips (nested items don't have data-tip)
assert menuitem_count > data_tip_count,
"Should have nested menu items (menuitems without data-tip)"
"Should have nested menu items (menuitems without data-tip)"
end
test "T3.3: renders nested menu with dropdown for collapsed state" do
@ -351,8 +353,9 @@ defmodule MvWeb.Layouts.SidebarTest do
test "T5.4: nested menu has correct ARIA attributes" do
html = render_sidebar(authenticated_assigns())
# Details summary should have haspopup
assert html =~ ~s(aria-haspopup="true")
# Expanded mode should have role="group" with aria-label
assert html =~ ~s(role="group")
assert html =~ ~s(aria-label="Administration")
# Dropdown button should have haspopup
assert html =~ ~s(aria-haspopup="menu")
@ -518,7 +521,8 @@ defmodule MvWeb.Layouts.SidebarTest do
assert html =~ ~s(role="menuitem")
# Check that nested menus exist
assert html =~ "<details"
assert html =~ ~s(<li role="none" class="expanded-menu-group">)
assert html =~ ~s(role="group")
# Footer section
assert html =~ "theme-controller"
@ -624,9 +628,10 @@ defmodule MvWeb.Layouts.SidebarTest do
test "renders expanded menu group" do
html = render_sidebar(authenticated_assigns())
# details/summary present
assert html =~ "<details"
assert html =~ "<summary"
# expanded-menu-group structure present
assert html =~ ~s(<li role="none" class="expanded-menu-group">)
assert html =~ ~s(role="group")
assert html =~ ~s(aria-label="Administration")
assert has_class?(html, "expanded-menu-group")
end
@ -654,7 +659,7 @@ defmodule MvWeb.Layouts.SidebarTest do
# There should be more menuitems than data-tips (nested items don't have data-tip)
assert menuitem_count > data_tip_count,
"Should have nested menu items (menuitems without data-tip)"
"Should have nested menu items (menuitems without data-tip)"
# Verify nested menu structure exists
assert html =~ ~s(role="menu")
@ -836,9 +841,10 @@ defmodule MvWeb.Layouts.SidebarTest do
assert has_class?(html, "expanded-menu-group")
assert has_class?(html, "collapsed-menu-group")
# Details element should not have duplicate hover classes
# (CSS handles this, but we verify structure)
assert html =~ "<details"
# Expanded menu group should have correct structure
# (CSS handles hover effects, but we verify structure)
assert html =~ ~s(<li role="none" class="expanded-menu-group">)
assert html =~ ~s(role="group")
end
test "tooltips only visible when collapsed" do