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

@@ -123,33 +123,29 @@ 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
-          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>
+      </div>
       <ul role="menu" class="ml-4">
         {render_slot(@inner_block)}
       </ul>
-      </details>
+    </li>
     <!-- Collapsed Mode: Dropdown -->
     <div class="collapsed-menu-group dropdown dropdown-right">
-        <button
+      <.link
         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"
+        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" aria-hidden="true" />
+        <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
-        </button>
+      </.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"
@@ -159,7 +155,6 @@ defmodule MvWeb.Layouts.Sidebar do
         {render_slot(@inner_block)}
       </ul>
     </div>
-    </li>
     """
   end