Fix links not clickable on 3th level (#16671)

### What does it do?

Hopefully it fixes #16667.

### How to test

1. Try clicking on all the links in the manager menu. Especially in the
3rd level.
2. Try navigating through the Manager Menu using the Tab key on your
keyboard and clicking on the menu items using the Enter key.
3. Make sure there are no new errors 😸.  

### Related issue(s)/PR(s)

#16530
#16667

---------

Co-authored-by: Jason Coward <jason@opengeek.com>

Author: jenswittmann

manager/assets/modext/core/modx.layout.js

@@ -62,14 +62,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,splitBarMargin: 8
 
     /**
-     * @property {Array} focusRestoreEls - Set Focus back on the last Element in array on close
+     * @property {Object} focusRestoreEl - Set Focus back on this Element
      */
-    ,focusRestoreEls: []
-
-    /**
-     * @property {bool} subNavOpen - Check if Subnav is opened
-     */
-    ,subNavOpen: false
+    ,focusRestoreEl: []
 
     /**
      * @property {Function} getSplitBarMargin - Utility getter for splitBarMargin
@@ -493,9 +488,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
                         }
                     }
                 });
-                buttons[i].addEventListener('click', function (e) {
+                buttons[i].addEventListener('click', function(e) {
                     e.stopPropagation();
-                    el.focusRestoreEls.push(this.querySelectorAll('a')[0]);
+                    el.focusRestoreEl = this.querySelectorAll('a')[0];
                     el.showMenu(this);
                 });
             }
@@ -514,30 +509,38 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             submenu.classList.remove('active');
         } else {
             this.hideMenu();
+            var isClick = false;
             submenu.classList.add('active');
             setTimeout(() => {
-                submenu.querySelectorAll('a')[0].focus();
+                var firstFocusEl = submenu.querySelectorAll('a')[0];
+                if (!firstFocusEl) {
+                    return;
+                }
+                firstFocusEl.focus();
             }, 50);
+            var menuItemClicked = (e) => {
+                isClick = true;
+                window.removeEventListener('click', menuItemClicked);
+            };
             var focusRestore = (e) => {
-                setTimeout(() => {
-                    if (this.subNavOpen) {
-                        return;
-                    }
+                requestAnimationFrame(() => {
                     if (!submenu.contains(document.activeElement)) {
-                        this.focusRestoreEls?.pop()?.focus();
+                        if (!isClick) {
+                            this.focusRestoreEl?.focus();
+                        }
                         this.hideMenu();
                         window.removeEventListener('focusout', focusRestore);
                     }
-                }, 1);
+                });
             };
             var menuArrowKeysNavigation = (e) => {
                 if (e.code == 'Escape') {
                     this.hideMenu();
-                    this.focusRestoreEls[0]?.focus();
-                    this.focusRestoreEls = [];
+                    this.focusRestoreEl?.focus();
                     window.removeEventListener('keyup', menuArrowKeysNavigation);
                 }
             };
+            window.addEventListener('click', menuItemClicked);
             window.addEventListener('focusout', focusRestore);
             window.addEventListener('keyup', menuArrowKeysNavigation);
         }
@@ -552,7 +555,6 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
     ,initSubPopper: function () {
         var buttons = document.querySelectorAll('#modx-header .sub, #modx-footer .sub');
         var position = window.innerWidth <= 960 ? 'bottom' : 'right';
-        var _this = this;
         for (var i = 0; i < buttons.length; i++) {
             let popperInstance = null;
 
@@ -595,17 +597,14 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             }
 
             function show(button) {
-                var menu = button.getElementsByTagName('ul')[0];
+                var submenu = button.getElementsByTagName('ul')[0];
                 button.classList.add('active');
-                menu.classList.add('active');
-                _this.focusRestoreEls.push(button.querySelectorAll('a')[0]);
-                _this.subNavOpen = true;
-                create(button, menu);
+                submenu.classList.add('active');
+                create(button, submenu);
                 var focusRestore = (e) => {
                     requestAnimationFrame(() => {
-                        if (!menu.contains(document.activeElement)) {
-                            _this.focusRestoreEls?.pop()?.parentNode?.nextSibling?.focus();
-                            hide(button);
+                        if (!submenu.contains(document.activeElement)) {
+                            submenu.classList.remove('active');
                             window.removeEventListener('focusout', focusRestore);
                         }
                     });
@@ -623,7 +622,6 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
                     submenu.removeAttribute('style');
                     buttons[i].classList.remove('active');
                 }
-                _this.subNavOpen = false;
                 destroy();
             }
             buttons[i].addEventListener('mouseenter', function (e) {
@@ -632,7 +630,9 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
             });
             buttons[i].querySelectorAll('a')[0].addEventListener('focus', function (e) {
                 e.stopPropagation();
-                show(this.parentNode);
+                requestAnimationFrame(() => {
+                    show(this.parentNode);
+                });
             });
             buttons[i].addEventListener('mouseleave', function (e) {
                 e.stopPropagation();

manager/assets/modext/modx.jsgrps-min.js

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 * 

manager/templates/default/css/index-min.css

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 * 

manager/templates/default/css/index.css

@@ -1,13 +1,6 @@
     </div>
     <!-- #modx-content-->
-    <div id="modx-footer">
-        {if $_search}
-            <div class="modx-subnav" id="modx-manager-search-icon-submenu">
-                <div class="modx-subnav-arrow"></div>
-                <div id="modx-manager-search" role="search"></div>
-            </div>
-        {/if}
-    </div>
+    <div id="modx-footer"></div>
 </div>
 <!-- #modx-container -->
 

manager/templates/default/css/login-min.css

@@ -111,6 +111,12 @@
                     </li>
                 {/if}
             </ul>
+            {if $_search}
+                <div class="modx-subnav" id="modx-manager-search-icon-submenu">
+                    <div class="modx-subnav-arrow"></div>
+                    <div id="modx-manager-search" role="search"></div>
+                </div>
+            {/if}
             <ul id="modx-topnav">
                 {eval var=$navb}
             </ul>

manager/templates/default/css/login.css

@@ -1,6 +1,6 @@
 /*
 * 
-* Copyright (C) 2024 MODX LLC
+* Copyright (C) 2025 MODX LLC
 * 
 * This file is part of MODX Revolution and was compiled using Grunt.
 *