MAGETWO-35489: Active state is lost for Navigation Menu items in Backend

- Fixed menu events

Author: Bogdan Plieshka

app/code/Magento/Backend/Block/Menu.php

@@ -191,7 +191,7 @@ protected function _renderItemCssClass($menuItem, $level)
         $output = ($this->_isItemActive(
             $menuItem,
             $level
-        ) ? '_active' : '') .
+        ) ? '_current _active' : '') .
             ' ' .
             ($menuItem->hasChildren() ? 'parent' : '') .
             ' ' .

app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less

@@ -15,9 +15,9 @@
 
 @menu__background-color: @color-very-dark-grayish-orange;
 
-@menu-logo__margin-bottom: 2.2rem;
-@menu-logo__outer-size: @menu-logo__padding-vertical + @menu-logo-img__height + @menu-logo__margin-bottom;
-@menu-logo__padding-vertical: 1.2rem;
+@menu-logo__padding-bottom: 2.2rem;
+@menu-logo__outer-size: @menu-logo__padding-top + @menu-logo-img__height + @menu-logo__padding-bottom;
+@menu-logo__padding-top: 1.2rem;
 @menu-logo-img__height: 4.1rem;
 @menu-logo-img__width: 3.5rem;
 
@@ -68,12 +68,27 @@
     }
     .logo {
         display: block;
-        height: @menu-logo-img__height + @menu-logo__padding-vertical * 2;
-        margin-bottom: @menu-logo__margin-bottom - @menu-logo__padding-vertical;
-        padding: @menu-logo__padding-vertical 0;
+        height: @menu-logo-img__height + @menu-logo__padding-top + @menu-logo__padding-bottom;
+        padding: @menu-logo__padding-top 0 @menu-logo__padding-bottom;
         position: relative;
         text-align: center;
         z-index: @menu__z-index;
+        &:focus {
+            background-color: @menu-item__active__background-color;
+            box-shadow: none;
+            + .admin__menu {
+                .level-0 {
+                    &:first-child {
+                        > a {
+                            background-color: @menu__background-color;
+                            &:after {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
         &:hover {
             .logo-img {
                 -webkit-filter: brightness(1.1);
@@ -133,7 +148,6 @@
         }
         //  Hover & active state for menu level 0 item
         &._active,
-        &._hover,
         &:hover {
             > a {
                 background-color: @menu-item__active__background-color;
@@ -185,19 +199,13 @@
             transition: all .5s ease;
             visibility: hidden;
             z-index: @submenu__z-index;
-            &._show {
+        }
+        &._show  {
+            > .submenu {
                 left: 100%;
                 visibility: visible;
             }
         }
-        &._recent {
-            &._hover {
-                .submenu {
-                    left: 100%;
-                    visibility: visible;
-                }
-            }
-        }
     }
 
     .level-1 {

app/design/adminhtml/Magento/backend/web/css/override.less

@@ -3119,13 +3119,22 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
 }
 .menu-wrapper .logo {
   display: block;
-  height: 6.5rem;
-  margin-bottom: 1rem;
-  padding: 1.2rem 0;
+  height: 7.5rem;
+  padding: 1.2rem 0 2.2rem;
   position: relative;
   text-align: center;
   z-index: 700;
 }
+.menu-wrapper .logo:focus {
+  background-color: #524d49;
+  box-shadow: none;
+}
+.menu-wrapper .logo:focus + .admin__menu .level-0:first-child > a {
+  background-color: #373330;
+}
+.menu-wrapper .logo:focus + .admin__menu .level-0:first-child > a:after {
+  display: none;
+}
 .menu-wrapper .logo:hover .logo-img {
   -webkit-filter: brightness(1.1);
   filter: brightness(1.1);
@@ -3162,7 +3171,6 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   display: none;
 }
 .admin__menu .level-0._active > a,
-.admin__menu .level-0._hover > a,
 .admin__menu .level-0:hover > a {
   background-color: #524d49;
   color: #f7f3eb;
@@ -3205,11 +3213,7 @@ fieldset[disabled] .admin__control-text + .ui-datepicker-trigger {
   visibility: hidden;
   z-index: 698;
 }
-.admin__menu .level-0 > .submenu._show {
-  left: 100%;
-  visibility: visible;
-}
-.admin__menu .level-0._recent._hover .submenu {
+.admin__menu .level-0._show > .submenu {
   left: 100%;
   visibility: visible;
 }

app/design/adminhtml/Magento/backend/web/js/theme.js

@@ -12,6 +12,8 @@ define('globalNavigation', [
     $.widget('mage.globalNavigation', {
         options: {
             selectors: {
+                menu: '#nav',
+                currentItem: '._current',
                 topLevelItem: '.level-0',
                 topLevelHref: '> a',
                 subMenu: '> .submenu',
@@ -25,6 +27,7 @@ define('globalNavigation', [
 
             this.menu      = this.element;
             this.menuLinks = $(selectors.topLevelHref, selectors.topLevelItem);
+            this.closeActions = $(selectors.closeSubmenuBtn);
 
             this._initOverlay()
                 ._bind();
@@ -44,40 +47,66 @@ define('globalNavigation', [
         },
 
         _bind: function () {
-            var lighten = this._lighten.bind(this),
-                open    = this._open.bind(this),
-                darken  = this._darken.bind(this);
+            var focus = this._focus.bind(this),
+                open = this._open.bind(this),
+                blur = this._blur.bind(this),
+                keyboard = this._keyboard.bind(this);
 
             this.menuLinks
-                .on('focus', lighten)
-                .on('click', open)
-                .on('blur',  darken);
+                .on('focus', focus)
+                .on('click', open);
+
+            this.menuLinks.last().on('blur', blur);
+
+            this.closeActions.on('keydown', keyboard);
+        },
+
+
+        /**
+         * Remove active class from current menu item
+         * Turn back active class to current page menu item
+         */
+        _blur: function(e){
+            var selectors = this.options.selectors,
+                menuItem  = $(e.target).closest(selectors.topLevelItem),
+                currentItem = $(selectors.menu).find(selectors.currentItem);
+
+            menuItem.removeClass('_active');
+            currentItem.addClass('_active');
         },
 
-        _lighten: function (e) {
+        /**
+         * Add focus to active menu item
+         */
+        _keyboard: function(e) {
             var selectors = this.options.selectors,
                 menuItem  = $(e.target).closest(selectors.topLevelItem);
 
-            menuItem
-                .addClass('_active')
-                .siblings(selectors.topLevelItem)
-                .removeClass('_active');
+            if(e.which === 13) {
+                this._close(e);
+                $(selectors.topLevelHref, menuItem).focus();
+            }
         },
 
-        _darken: function (e) {
+        /**
+         * Toggle active state on focus
+         */
+        _focus: function (e) {
             var selectors = this.options.selectors,
                 menuItem  = $(e.target).closest(selectors.topLevelItem);
 
-            menuItem.removeClass('_active');
+            menuItem.addClass('_active')
+                    .siblings(selectors.topLevelItem)
+                    .removeClass('_active');
         },
 
         _closeSubmenu: function (e) {
             var selectors = this.options.selectors,
-                menuItem  = $(e.target).closest(selectors.topLevelItem);
+                currentItem = $(selectors.menu).find(selectors.currentItem);
 
             this._close(e);
 
-            $(selectors.topLevelHref, menuItem).focus();
+            currentItem.addClass('_active');
         },
 
         _open: function (e) {
@@ -92,33 +121,36 @@ define('globalNavigation', [
                 e.preventDefault();
             }
 
-            menuItem
-                .addClass('_hover _recent')
-                .siblings(menuItemSelector)
-                .removeClass('_hover _recent');
+            menuItem.addClass('_show')
+                    .siblings(menuItemSelector)
+                    .removeClass('_show');
 
             subMenu.attr('aria-expanded', 'true');
 
             closeBtn.on('click', close);
 
             this.overlay.show(0).on('click', close);
+            this.menuLinks.last().off('blur');
         },
 
         _close: function (e) {
             var selectors   = this.options.selectors,
-                menuItem    = this.menu.find(selectors.topLevelItem + '._hover._recent'),
+                menuItem    = this.menu.find(selectors.topLevelItem + '._show'),
                 subMenu     = $(selectors.subMenu, menuItem),
-                closeBtn    = subMenu.find(selectors.closeSubmenuBtn);
+                closeBtn    = subMenu.find(selectors.closeSubmenuBtn),
+                blur        = this._blur.bind(this);
 
             e.preventDefault();
 
             this.overlay.hide(0).off('click');
 
+            this.menuLinks.last().on('blur', blur);
+
             closeBtn.off('click');
 
             subMenu.attr('aria-expanded', 'false');
 
-            menuItem.removeClass('_hover _recent');
+            menuItem.removeClass('_show _active');
         }
     });