[Mod] Expand and Collapse the main CMS navigation on hover

[mooror]

The Problem

The "Fixed" collapsed mode for the main CMS navigation is helpful for increasing the size of editing interfaces, but it can slow down navigation for those who are not familiar with the icons (you either have to hover over the items to read their titles or expand the menu).

Proposed Solution

Add a third "Hover" mode to the circular mode toggle button. When this mode is enabled, the menu will appear in its collapsed state, but unlike "Fixed", will expand on mouse enter, and collapse on mouse leave.

My Current Implementation

My mod (if you will) uses custom javascript, css and one class change in the LeftAndMain_Menu.ss template.

NavigationHoverMode.css

#cms-menu {
  transition: width 300ms ease;
}

#cms-menu.collapsed {
  transition: width 150ms ease-out;
}

/* Hide scrollbar on webkit browsers when navigation is collapsed */
#cms-menu.collapsed .panel--scrollable::-webkit-scrollbar {
  display: none;
}

.cms-login-status .cms-login-status__profile-link span,
.cms-login-status .cms-login-status__logout-link {
  transition: opacity 300ms ease;
}

@media (min-width: 768px) {
  .cms-menu.collapsed .cms-login-status .cms-login-status__logout-link {
    display: flex;
    opacity: 0;
  }

  .cms-menu__list li a {
    display: flex;
    min-height: 52px;
    align-items: center;
  }

  .cms-menu.collapsed .cms-menu__list {
    overflow: hidden auto;
  }

  .cms-menu__list li a .text {
    min-width: 137px;
    transition: transform 150ms ease;
  }

  .cms-menu.collapsed span.text {
    display: block;
    transform: translateX(12px);
  }

  .menu__icon {
    display: flex;
    transition: transform 300ms ease;
    background-position: center;
  }

  .collapsed .menu__icon {
    left: 13px;
    transform: translateX(9px);
  }
}

NavigationHoverMode.css

(function ($) {
  $.entwine('ss', function ($) {
    /**
     * Hover Toggle Functionality
     * Expands and collapses the main navigation on hover
     */
    $('.cms-panel.cms-menu').entwine({
     // Ensures that the panel is collapsed by default if sticky/fixed mode is not enabled.
     // If fixed mode is used the persisted state is used, unless no state was persisted
     // in which case the panel is checked for the collapsed class
      getInitialCollapsedState: function () {
        var isCollapsed = this.getPersistedCollapsedState();

        if (!$('.cms-menu').getPersistedStickyState()) {
          isCollapsed = true;
        } else {
          if (isCollapsed === void 0) {
            isCollapsed = this.hasClass('collapsed');
          }
        }
        return isCollapsed;
      },
      // This prevents an edge case in which the initial state of the panel is closed, 
      // but the evaluated state is set to open. Functionally, this prevents the menu 
      // automatically opening immediately after initialization
      getEvaluatedCollapsedState: function () {
        var shouldCollapse,
          manualState = this.getPersistedCollapsedState(),
          menuIsSticky = $('.cms-menu').getPersistedStickyState(),
          automaticState = true;

        if (manualState === void 0) {
          // There is no manual state, use automatic state.
          shouldCollapse = automaticState;
        } else if (manualState !== automaticState && menuIsSticky) {
          // The manual and automatic state conflict, use manual state.
          shouldCollapse = manualState;
        } else {
          // Use automatic state.
          shouldCollapse = automaticState;
        }

        return shouldCollapse;
      },
      // Expends the navigation on mouse enter
      onmouseenter: function (e) {
        if (!$('.cms-menu').getPersistedStickyState()) {
          this.expandPanel();
        }
      },
      // Collapses the navigation on mouse leave
      onmouseleave: function (e) {
        if (!$('.cms-menu').getPersistedStickyState()) {
            this.collapsePanel();
        }
      },
    });
  });
})(jQuery);

To make sure the bar starts collapsed when there is no state, add the collapsed class to the #cms-menu element

LeftAndMain_Menu.ss

<div class="... collapsed" id="cms-menu">...</div>

Needed Changes

My Mod works in it's current form, But it will clobber the existing "Auto" mode so it will need the following changes before it can be included in the core:

• (Recommended) Add a new "hover" option to the mode button (I believe the "Auto" mode is just stored as a class and then picked up by the entwine javascript, so there may need to be some new "mode" state tracking done for this)
• (Required) Whether its with a new mode, or some other configuration, the code needs to be updated so it will not break backwards compatibility by clobbering the "auto" mode
• (Highly Recommended) There should be a property that can be set on the LeftAndMain class (something like "menu_starts_closed") which will automatically add the collapsed class to the #cms-menu element. That way we don't have to clobber the LeftAndMain_Menu.ss template, or force all users to have the menu collapsed by default

Additional context or points of discussion

Today I shared a short video of my CMS navigation modification in the #general slack channel . @GuySartorelli and I spoke about the possibility of adding this feature to the core at some point.

I'd like to make a PR for this, but at present I don't have the time, but I wanted to at least share the idea and mod so others could use it if they were okay with clobbering the existing "Auto" menu mode with a on hover mode.

Validations

• You intend to implement the feature yourself
• You have read the contributing guide
• You strongly believe this feature should be in core, rather than being its own community module
• You have checked for existing issues or pull requests related to this feature (and didn't find any)