Fix separator for menu item without children (#16647)

### What does it do? Adds separator for menu items without children ### Why is it needed? Missing separator ### How to test Create menu entry without children ### Related issue(s)/PR(s) Resolves #16645 --------- Co-authored-by: Jason Coward <[email protected]>
modxcms · Dec 4, 2024 · 3000918 · 3000918
1 parent 845d568
commit 3000918
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 45 deletions.
diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
@@ -87,7 +87,7 @@
       display: none;
     }
     #user-username {
-      white-space: nowrap; 
+      white-space: nowrap;
       overflow: hidden;
       max-width: 7ch;
       text-overflow: ellipsis;
@@ -108,7 +108,7 @@
     margin: 0;
     padding: 0;
 
-    .top:not(#modx-manager-search-icon) {
+    > li {
       border-top: 1px solid $navbarBorder;
     }
 

diff --git a/manager/assets/modext/core/modx.layout.js b/manager/assets/modext/core/modx.layout.js
@@ -455,48 +455,50 @@ Ext.extend(MODx.Layout, Ext.Viewport, {
         var position = window.innerWidth <= 960 ? 'bottom' : 'right';
         for (var i = 0; i < buttons.length; i++) {
             var submenu = document.getElementById(buttons[i].id + '-submenu');
-            new Popper(buttons[i], submenu, {
-                placement: position,
-                modifiers: {
-                    arrow: {
-                        element: submenu.getElementsByClassName('modx-subnav-arrow')[0]
-                    },
-                    flip: {
-                        enabled: false
-                    },
-                    applyStyle: {
-                        enabled: true,
-                        fn: function(data) {
-                            for (var i in data.offsets.popper) {
-                                if (i !== 'bottom' && i !== 'right') {
-                                    if (data.offsets.popper.hasOwnProperty(i)) {
-                                        data.instance.popper.style[i] = !isNaN(parseFloat(data.offsets.popper[i]))
-                                            ? data.offsets.popper[i] + 'px'
-                                            : data.offsets.popper[i];
+            if (submenu) {
+                new Popper(buttons[i], submenu, {
+                    placement: position,
+                    modifiers: {
+                        arrow: {
+                            element: submenu.getElementsByClassName('modx-subnav-arrow')[0]
+                        },
+                        flip: {
+                            enabled: false
+                        },
+                        applyStyle: {
+                            enabled: true,
+                            fn: function (data) {
+                                for (var i in data.offsets.popper) {
+                                    if (i !== 'bottom' && i !== 'right') {
+                                        if (data.offsets.popper.hasOwnProperty(i)) {
+                                            data.instance.popper.style[i] = !isNaN(parseFloat(data.offsets.popper[i]))
+                                                ? data.offsets.popper[i] + 'px'
+                                                : data.offsets.popper[i];
+                                        }
+                                    }
+                                    if (data.offsets.arrow.top !== '') {
+                                        data.arrowElement.style.top = data.offsets.arrow.top + 'px';
+                                    }
+                                    if (data.offsets.arrow.left) {
+                                        data.arrowElement.style.left = data.offsets.arrow.left + 'px';
                                     }
-                                }
-                                if (data.offsets.arrow.top !== '') {
-                                    data.arrowElement.style.top = data.offsets.arrow.top + 'px';
-                                }
-                                if (data.offsets.arrow.left) {
-                                    data.arrowElement.style.left = data.offsets.arrow.left + 'px';
                                 }
                             }
+                        },
+                        preventOverflow: {
+                            boundariesElement: document.getElementById('modx-container'),
+                            priority: position === 'right'
+                                ? ['bottom', 'top']
+                                : ['left', 'right']
                         }
-                    },
-                    preventOverflow: {
-                        boundariesElement: document.getElementById('modx-container'),
-                        priority: position === 'right'
-                            ? ['bottom','top']
-                            : ['left','right']
                     }
-                }
-            });
-            buttons[i].addEventListener('click', function(e) {
-                e.stopPropagation();
-                el.focusRestoreEls.push(this.querySelectorAll('a')[0]);
-                el.showMenu(this);
-            });
+                });
+                buttons[i].addEventListener('click', function (e) {
+                    e.stopPropagation();
+                    el.focusRestoreEls.push(this.querySelectorAll('a')[0]);
+                    el.showMenu(this);
+                });
+            }
         }
         window.addEventListener('click', function() {
             el.hideMenu();

diff --git a/manager/assets/modext/modx.jsgrps-min.js b/manager/assets/modext/modx.jsgrps-min.js
diff --git a/manager/controllers/default/header.php b/manager/controllers/default/header.php
@@ -179,17 +179,16 @@ public function buildMenu($name, $placeholder)
                 $description = '<span class="description">'.$menu['description'].'</span>'."\n";
             }
 
-            $top = !empty($menu['children']) ? ' top' : '';
             $position = $idx <= 2 && $placeholder == 'navb' ? 'down' : 'up';
 
-            $menuTpl = '<li id="limenu-'.$menu['id'].'"class="menu-'.$position.$top.'">'."\n";
+            $menuTpl = '<li id="limenu-'.$menu['id'].'"class="menu-'.$position.' top">'."\n";
             if (!empty($menu['action'])) {
                 if ($menu['namespace'] != 'core') {
                     // Handle the namespace
                     $menu['action'] .= '&namespace='.$menu['namespace'];
                 }
                 $onclick = (!empty($menu['handler'])) ? ' onclick="'.str_replace('"','\'',$menu['handler']).'"' : '';
-                $menuTpl .= '<a href="?a='.$menu['action'].$menu['params'].'"'.( $top ? ' class="top-link"': '' ).$onclick.$title.$ariaLabel.'>'.$label.$description.'</a>'."\n";
+                $menuTpl .= '<a href="?a=' . $menu['action'] . $menu['params'] . '"' . $onclick . $title . $ariaLabel . '>' . $label . $description . '</a>' . "\n";
             } elseif (!empty($menu['handler'])) {
                 $menuTpl .= '<a href="javascript:;" onclick="'.str_replace('"','\'',$menu['handler']).'"'.$title.$ariaLabel.'>'.$label.$description.'</a>'."\n";
             } else {

diff --git a/manager/templates/default/css/index-min.css b/manager/templates/default/css/index-min.css
diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
@@ -23320,7 +23320,7 @@ ul.x-tab-strip-bottom .x-tab-left {
     margin: 0;
     padding: 0;
 }
-#modx-navbar #modx-topnav .top:not(#modx-manager-search-icon) {
+#modx-navbar #modx-topnav > li {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 #modx-navbar #modx-topnav > li:not(#modx-home-dashboard):not(#modx-manager-search-icon):not(#modx-leftbar-trigger) > a {