Replace Manager mobile dashboard selector with menu

app/modules/manager_dashboard/templates/manager_dashboard/dashboard.html

@@ -28,17 +28,45 @@
     ('wizards','Wizards')
   ] %}
 
-  <section class="rounded-3xl border border-slate-200 bg-white p-3 shadow-soft">
+  <section class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-soft">
     <div class="sm:hidden">
-      <label for="manager-dashboard-tab-select" class="mb-2 block text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Dashboard section</label>
+      <details id="manager-dashboard-mobile-menu" class="group">
-      <select id="manager-dashboard-tab-select" class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm font-semibold text-slate-800 outline-none transition focus:border-brand-500 focus:ring-4 focus:ring-brand-100">
+        <summary class="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-semibold text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500">
-        {% for code, label in tabs %}
+          <span class="inline-flex items-center gap-2">
-        <option value="{{ code }}" {% if active_tab == code %}selected{% endif %}>{{ label }}</option>
+            <svg class="h-5 w-5 group-open:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-        {% endfor %}
+              <path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16" />
-      </select>
+            </svg>
+            <svg class="hidden h-5 w-5 group-open:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+              <path stroke-linecap="round" d="M6 6l12 12M18 6 6 18" />
+            </svg>
+            <span>Menu</span>
+          </span>
+          <span class="text-xs font-medium text-slate-500">Manager dashboard navigation</span>
+        </summary>
+
+        <nav aria-label="Manager dashboard navigation" class="border-t border-slate-100 bg-slate-50/80 px-4 py-3">
+          <ul class="space-y-1" role="list">
+            {% for code, label in tabs %}
+            <li>
+              <button
+                type="button"
+                data-tab="{{ code }}"
+                class="manager-tab flex w-full items-center justify-between gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-semibold transition {% if active_tab == code %}bg-brand-50 text-brand-700{% else %}bg-white text-slate-800 hover:bg-slate-100{% endif %}"
+                {% if active_tab == code %}aria-current="page"{% endif %}
+              >
+                <span>{{ label }}</span>
+                {% if active_tab == code %}
+                <span class="h-2 w-2 rounded-full bg-brand-600" aria-hidden="true"></span>
+                {% endif %}
+              </button>
+            </li>
+            {% endfor %}
+          </ul>
+        </nav>
+      </details>
     </div>
 
-    <div class="hidden gap-2 overflow-x-auto sm:flex" id="manager-tabs">
+    <div class="hidden gap-2 overflow-x-auto p-3 sm:flex" id="manager-tabs">
       {% for code, label in tabs %}
       <button type="button" data-tab="{{ code }}" class="manager-tab whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-semibold transition {% if active_tab == code %}bg-brand-600 text-white{% else %}text-slate-600 hover:bg-slate-100{% endif %}">{{ label }}</button>
       {% endfor %}
@@ -53,24 +81,48 @@
 <script>
 (function(){
   const tabs = document.querySelectorAll('.manager-tab');
-  const select = document.getElementById('manager-dashboard-tab-select');
   const panel = document.getElementById('manager-dashboard-panel');
+  const mobileMenu = document.getElementById('manager-dashboard-mobile-menu');
 
   function setActiveState(tab) {
     tabs.forEach(btn => {
       const active = btn.dataset.tab === tab;
-      btn.classList.toggle('bg-brand-600', active);
+      const isMobileButton = btn.closest('#manager-dashboard-mobile-menu') !== null;
-      btn.classList.toggle('text-white', active);
+
-      btn.classList.toggle('text-slate-600', !active);
+      if (isMobileButton) {
-      btn.classList.toggle('hover:bg-slate-100', !active);
+        btn.classList.toggle('bg-brand-50', active);
+        btn.classList.toggle('text-brand-700', active);
+        btn.classList.toggle('bg-white', !active);
+        btn.classList.toggle('text-slate-800', !active);
+        btn.classList.toggle('hover:bg-slate-100', !active);
+        if (active) {
+          btn.setAttribute('aria-current', 'page');
+        } else {
+          btn.removeAttribute('aria-current');
+        }
+
+        let marker = btn.querySelector('[data-active-marker]');
+        if (active && !marker) {
+          marker = document.createElement('span');
+          marker.dataset.activeMarker = 'true';
+          marker.className = 'h-2 w-2 rounded-full bg-brand-600';
+          marker.setAttribute('aria-hidden', 'true');
+          btn.appendChild(marker);
+        } else if (!active && marker) {
+          marker.remove();
+        }
+      } else {
+        btn.classList.toggle('bg-brand-600', active);
+        btn.classList.toggle('text-white', active);
+        btn.classList.toggle('text-slate-600', !active);
+        btn.classList.toggle('hover:bg-slate-100', !active);
+      }
     });
-    if (select && select.value !== tab) {
-      select.value = tab;
-    }
   }
 
   async function loadTab(tab) {
     setActiveState(tab);
+    if (mobileMenu) mobileMenu.open = false;
     panel.innerHTML = '<div class="rounded-3xl border border-slate-200 bg-white p-8 text-center text-sm text-slate-500 shadow-soft">Loading...</div>';
     try {
       const res = await fetch('/manager/dashboard/tab/' + encodeURIComponent(tab), {headers: {'X-Requested-With':'fetch'}});
@@ -85,9 +137,6 @@
   }
 
   tabs.forEach(btn => btn.addEventListener('click', () => loadTab(btn.dataset.tab)));
-  if (select) {
-    select.addEventListener('change', () => loadTab(select.value));
-  }
 })();
 </script>
 {% endblock %}