openproject/app/assets/javascripts/specific/main_menu.js.erb

<%#-- copyright
OpenProject is a project management system.
Copyright (C) 2012-2018 the OpenProject Foundation (OPF)

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License version 3.

OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
Copyright (C) 2006-2017 Jean-Philippe Lang
Copyright (C) 2010-2013 the ChiliProject Team

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

See docs/COPYRIGHT.rdoc for more details.

++#%>

function initMainMenuExpandStatus() {
  var wrapper = jQuery('#wrapper')

  var upToggle = jQuery('ul.menu_root.closed li.open a.arrow-left-to-project');
  if (upToggle.length == 1 && wrapper.hasClass('hidden-navigation')) {
    upToggle.trigger('click');
  }
}

jQuery(document).ready(function($) {
  // rejigger the main-menu sub-menu functionality.
  $("#main-menu .toggler").remove(); // remove the togglers so they're inserted properly later.

  $.fn.mySlide = function (callback) {
    this.slideToggle(animationRate, callback);

    return this;
  };

  var toggler = $('<a class="toggler" href="#"><i class="icon6 icon-toggler icon-arrow-right3" aria-hidden="true"></i><span class="hidden-for-sighted"></span></a>')
    .click(function() {
      var target = $(this);
      if (target.hasClass('toggler')) {

        // TODO: Instead of hiding the sidebar move sidebar's contents to submenus and cache it.
        $('#sidebar').toggleClass('-hidden', true);

        $(".menu_root li").removeClass('open')
        $(".menu_root").removeClass('open').addClass('closed');
        target.closest('li').addClass('open');
        target.closest('li').find('li > a:first').focus();
      }
      return false;
    });

  // wrap main items
  var mainItems = $('#main-menu li > a').not('ul ul a');

  function getMainItemWrapper(index) {
    var item = mainItems[index];
    var elementId = item.id;

    var wrapperElement = $('<div class="main-item-wrapper"/>')

    // inherit element id
    if(elementId) {
      wrapperElement.attr('id', elementId + '-wrapper')
    }

    return wrapperElement;
  }

  mainItems.wrap(getMainItemWrapper)

  $('#main-menu li:has(ul) .main-item-wrapper > a').not('ul ul a')
    // 1. unbind the current click functions
    .unbind('click')
    // 2. wrap each in a span that we'll use for the new click element
    .wrapInner('<span class="ellipsis"/>')
    // 3. reinsert the <span class="toggler"> so that it sits outside of the above
    .after(toggler);

  $('#main-menu ul.main-menu--children').each(function(_i, child){
    var title = $(child).parents('li').find('.main-item-wrapper .menu-item--title').text();
    var header = $('<div class="main-menu--children-menu-header"></div>');
    var upLink = $('<a class="main-menu--arrow-left-to-project" href="#"><i class="icon-arrow-left1" aria-hidden="true"></i></a>');
    upLink.attr('title', I18n.t('js.label_up'));
    upLink.click(function() {
      var target = $(this);
      $(target).parents('li').first().removeClass('open');
      $(".menu_root").removeClass('closed').addClass('open');

      target.parents('li').first().find('.toggler').first().focus();

      // TODO: Instead of hiding the sidebar move sidebar's contents to submenus and cache it. 
      $('#sidebar').toggleClass('-hidden', false);
    });
    header.append(upLink);
    header.append('<span class="main-menu--parent-node ellipsis">' + title + '</span>');
    $(child).before(header);
  })

});