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

fix: link/button semantics

Browse source
This commit is contained in:
Simon 2026-01-16 17:16:06 +01:00
parent c86ae6aa9d
commit 54d96136b7
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
2 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
assets/css/app.css
View file

@ -237,7 +237,8 @@
.sidebar .menu > li > a, .sidebar .menu > li > a,
.sidebar .menu > li > button, .sidebar .menu > li > button,
.sidebar .menu > div.collapsed-menu-group > a { .sidebar .menu > li.expanded-menu-group > div,
.sidebar .menu > div.collapsed-menu-group > button {
@apply transition-all duration-300; @apply transition-all duration-300;
padding-left: 14px; padding-left: 14px;
} }
@ -247,12 +248,16 @@
- Keep padding-left at 14px so icons stay centered under logo */ - Keep padding-left at 14px so icons stay centered under logo */
[data-sidebar-expanded="false"] .sidebar .menu > li > a, [data-sidebar-expanded="false"] .sidebar .menu > li > a,
[data-sidebar-expanded="false"] .sidebar .menu > li > button, [data-sidebar-expanded="false"] .sidebar .menu > li > button,
[data-sidebar-expanded="false"] .sidebar .menu > div.collapsed-menu-group > a { [data-sidebar-expanded="false"] .sidebar .menu > li.expanded-menu-group > div,
[data-sidebar-expanded="false"] .sidebar .menu > div.collapsed-menu-group > button {
@apply gap-0; @apply gap-0;
padding-left: 14px; padding-left: 14px;
padding-right: 14px; /* Center icon horizontally in 64px sidebar */ padding-right: 14px; /* Center icon horizontally in 64px sidebar */
} }
/* ============================================ /* ============================================
Footer Button Alignment - Left Aligned in Collapsed State Footer Button Alignment - Left Aligned in Collapsed State
============================================ */ ============================================ */

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

@ -81,7 +81,7 @@ defmodule MvWeb.Layouts.Sidebar do
icon="hero-currency-euro" icon="hero-currency-euro"
label={gettext("Fee Types")} label={gettext("Fee Types")}
/> />
<!-- Nested Admin Menu --> <!-- Nested Admin Menu -->
<.menu_group icon="hero-cog-6-tooth" label={gettext("Administration")}> <.menu_group icon="hero-cog-6-tooth" label={gettext("Administration")}>
<.menu_subitem href={~p"/users"} label={gettext("Users")} /> <.menu_subitem href={~p"/users"} label={gettext("Users")} />
@ -138,17 +138,17 @@ defmodule MvWeb.Layouts.Sidebar do
</li> </li>
<!-- Collapsed Mode: Dropdown --> <!-- Collapsed Mode: Dropdown -->
<div class="collapsed-menu-group dropdown dropdown-right"> <div class="collapsed-menu-group dropdown dropdown-right">
<.link <button
type="button" type="button"
tabindex="0" 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" class="flex items-center gap-3 px-2 py-1.5 rounded-selector hover:bg-base-300 tooltip tooltip-right focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 cursor-pointer"
role="menuitem" role="menuitem"
data-tip={@label} data-tip={@label}
aria-haspopup="menu" aria-haspopup="menu"
aria-label={@label} aria-label={@label}
> >
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" /> <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
</.link> </button>
<ul <ul
class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2 focus:outline-none" class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2 focus:outline-none"
role="menu" role="menu"