diff --git a/app/modules/core/static/admin/js/my-menu-config.js b/app/modules/core/static/admin/js/my-menu-config.js index 5e8424a6..7d1e5a76 100644 --- a/app/modules/core/static/admin/js/my-menu-config.js +++ b/app/modules/core/static/admin/js/my-menu-config.js @@ -1,16 +1,10 @@ // static/admin/js/my-menu-config.js // Personal menu configuration for super admins // -// TODO: BUG - Sidebar menu doesn't update immediately after changes. -// User must navigate to another page to see the updated menu. -// The issue is that Alpine.js doesn't properly track reactivity for the -// visibleMenuItems Set in init-alpine.js. Attempted fixes with reloadSidebarMenu() -// and window.location.reload() didn't work reliably. -// Possible solutions: -// 1. Convert visibleMenuItems from Set to plain object for better Alpine reactivity -// 2. Use Alpine.store() for shared state between components -// 3. Dispatch a custom event that the sidebar listens for -// 4. Force re-render of sidebar component after changes +// NOTE: The page method for loading user menu config is named loadUserMenuConfig() +// (not loadMenuConfig()) to avoid shadowing the sidebar's loadMenuConfig() inherited +// from data() via the spread operator. Shadowing caused the sidebar to never populate +// its menuData, resulting in a blank sidebar on this page. const myMenuConfigLog = window.LogConfig?.loggers?.myMenuConfig || window.LogConfig?.createLogger?.('myMenuConfig') || console; @@ -71,7 +65,7 @@ function adminMyMenuConfig() { try { // Load core translations for confirmations await I18n.loadModule('core'); - await this.loadMenuConfig(); + await this.loadUserMenuConfig(); myMenuConfigLog.info('=== MY MENU CONFIG PAGE INITIALIZED ==='); } catch (error) { myMenuConfigLog.error('Failed to initialize my menu config page:', error); @@ -82,10 +76,10 @@ function adminMyMenuConfig() { async refresh() { this.error = null; this.successMessage = null; - await this.loadMenuConfig(); + await this.loadUserMenuConfig(); }, - async loadMenuConfig() { + async loadUserMenuConfig() { this.loading = true; this.error = null;