feat: adjust display of submenu

assets/css/app.css

@@ -181,6 +181,25 @@
   padding-left: 14px;
 }
 
+/* ============================================
+   Menu Groups - Disable hover and active on expanded-menu-group header
+   ============================================ */
+
+/* Disable all interactive effects on expanded-menu-group header (no href, not clickable) */
+.sidebar .menu > li.menu-group > .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 {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  cursor: default !important;
+  color: inherit;
+}
+
 /* ============================================
    Elements Only Visible in Expanded State
    ============================================ */
@@ -217,7 +236,8 @@
    - Menu has p-2 (8px), so links need 14px additional padding-left */
 
 .sidebar .menu > li > a,
-.sidebar .menu > li > button {
+.sidebar .menu > li > button,
+.sidebar .menu > div.collapsed-menu-group > a {
   @apply transition-all duration-300;
   padding-left: 14px;
 }
@@ -226,7 +246,8 @@
    - Remove gap so label (which is opacity-0 w-0) doesn't create space
    - 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 > button {
+[data-sidebar-expanded="false"] .sidebar .menu > li > button,
+[data-sidebar-expanded="false"] .sidebar .menu > div.collapsed-menu-group > a {
   @apply gap-0;
   padding-left: 14px;
   padding-right: 14px; /* Center icon horizontally in 64px sidebar */

lib/mv_web/components/layouts/sidebar.ex

@@ -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: Always open div structure -->
-      <!-- Expanded Mode: Details/Summary -->
+    <li class="expanded-menu-group">
-      <details class="expanded-menu-group">
+      <div class="flex items-center gap-3">
-        <summary
+        <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
-          class="flex items-center gap-3 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+        <span class="menu-label">{@label}</span>
-          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>
       </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