From e5338f69ee5a82f1bdf60c82d087d9b4fbbbd6f2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 8 Apr 2026 17:48:41 -0700
Subject: [PATCH 1/3] fix: replace userDropdown id with class to fix mobile
 dropdown

Using getElementById('userDropdown') breaks when multiple dropdown
elements exist (e.g., desktop sidebar + mobile hamburger menu both
render a user dropdown). Only the first element is found, leaving
the other non-functional.

Switch all templates to use querySelectorAll('.userDropdown') so
every dropdown instance toggles correctly.

Closes #398

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../templates/layouts/admin-layout-v2.template.ts  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/templates/layouts/admin-layout-v2.template.ts b/packages/core/src/templates/layouts/admin-layout-v2.template.ts
index 8280c5ad2..5aa15c942 100644
--- a/packages/core/src/templates/layouts/admin-layout-v2.template.ts
+++ b/packages/core/src/templates/layouts/admin-layout-v2.template.ts
@@ -319,16 +319,20 @@ export function adminLayoutV2(data: AdminLayoutData): string {
     
     // User dropdown toggle
     function toggleUserDropdown() {
-      const dropdown = document.getElementById('userDropdown');
-      dropdown.classList.toggle('hidden');
+      const dropdowns = document.querySelectorAll('.userDropdown');
+      dropdowns.forEach(function(dropdown) {
+        dropdown.classList.toggle('hidden');
+      });
     }
     
     // Close dropdown when clicking outside
     document.addEventListener('click', function(event) {
-      const dropdown = document.getElementById('userDropdown');
+      const dropdowns = document.querySelectorAll('.userDropdown');
       const button = event.target.closest('button');
       if (!button || !button.getAttribute('onclick')) {
-        dropdown.classList.add('hidden');
+        dropdowns.forEach(function(dropdown) {
+          dropdown.classList.add('hidden');
+        });
       }
     });
     
@@ -802,7 +806,7 @@ function renderTopBar(pageTitle: string, user?: any): string {
                 </button>
                 
                 <!-- Dropdown Menu -->
-                <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]">
+                <div class="userDropdown hidden absolute right-0 mt-2 w-48 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]">
                   <div class="py-2">
                     <div class="px-4 py-2 border-b border-white/10">
                       <p class="text-sm font-medium text-gray-1">${user.name || user.email || "User"}</p>

From 553af881d1e93911f950066961add89e493c2aa8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 8 Apr 2026 17:48:59 -0700
Subject: [PATCH 2/3] fix: update catalyst template click-outside to use
 querySelectorAll

---
 .../layouts/admin-layout-catalyst.template.ts          | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/templates/layouts/admin-layout-catalyst.template.ts b/packages/core/src/templates/layouts/admin-layout-catalyst.template.ts
index d89e4828d..2427cfa7c 100644
--- a/packages/core/src/templates/layouts/admin-layout-catalyst.template.ts
+++ b/packages/core/src/templates/layouts/admin-layout-catalyst.template.ts
@@ -426,10 +426,14 @@ export function renderAdminLayoutCatalyst(
 
     // Close dropdown when clicking outside
     document.addEventListener('click', function(event) {
-      const dropdown = document.getElementById('userDropdown');
+      const dropdowns = document.querySelectorAll('.userDropdown');
       const button = event.target.closest('[data-user-menu]');
-      if (!button && dropdown && !dropdown.contains(event.target)) {
-        dropdown.classList.add('hidden');
+      if (!button) {
+        dropdowns.forEach(function(dropdown) {
+          if (!dropdown.contains(event.target)) {
+            dropdown.classList.add('hidden');
+          }
+        });
       }
     });
 

From fd7f32a6f536f44140ca288a7e56b415b6ff1b56 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 8 Apr 2026 17:49:00 -0700
Subject: [PATCH 3/3] fix: update glass-admin template to use class-based
 dropdown selectors

---
 packages/templates/src/glass-admin.template.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/templates/src/glass-admin.template.ts b/packages/templates/src/glass-admin.template.ts
index 95851c132..1dc9f7e7b 100644
--- a/packages/templates/src/glass-admin.template.ts
+++ b/packages/templates/src/glass-admin.template.ts
@@ -67,7 +67,7 @@ export function renderGlassAdminTemplate(): string {
                             </button>
                             
                             <!-- Dropdown Menu -->
-                            <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]">
+                            <div class="userDropdown hidden absolute right-0 mt-2 w-48 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]">
                                 <div class="py-2">
                                     <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:text-white hover:bg-white/10 transition-colors">
                                         <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -111,16 +111,20 @@ export function renderGlassAdminTemplate(): string {
         
         <script>
             function toggleUserDropdown() {
-                const dropdown = document.getElementById('userDropdown');
-                dropdown.classList.toggle('hidden');
+                const dropdowns = document.querySelectorAll('.userDropdown');
+                dropdowns.forEach(function(dropdown) {
+                    dropdown.classList.toggle('hidden');
+                });
             }
-            
+
             // Close dropdown when clicking outside
             document.addEventListener('click', function(event) {
-                const dropdown = document.getElementById('userDropdown');
+                const dropdowns = document.querySelectorAll('.userDropdown');
                 const button = event.target.closest('button');
                 if (!button || !button.getAttribute('onclick')) {
-                    dropdown.classList.add('hidden');
+                    dropdowns.forEach(function(dropdown) {
+                        dropdown.classList.add('hidden');
+                    });
                 }
             });
         </script>