Admin toolbar default left / vertical

Question

On page load I need to

• show the toolbar on the left / in vertical mode when in admin theme
• collapse/minimize the toolbar when in frontend theme

I'm looking for the event and the function to trigger those actions programmatically, e.g. something like

$(document).on('toolbar.loaded', Drupal.toolbar.setOrientationLeft);

and

$(document).on('toolbar.loaded', Drupal.toolbar.closeToolbar);

(I'm using the Admin Toolbar plugin)

Please note that I'm looking a solution that does not check CSS classes or triggers DOM clicks, in order to avoid timing problems due to asynchronous loading or exisiting toolbar settings.

Answer 1

If you go through its possible to make it as horizontal. Try this code wherever needed:

jQuery('#toolbar-bar button').each(function(){
  if(jQuery(this).html() === 'Vertical orientation'){
    jQuery(this).click();
  }
  if(jQuery(this).find('span.label').text() === 'Tools'){
    var open = jQuery(".toolbar-box").find('.open').length;
    if (open > 0) {
      jQuery(this).find('span.label').click();
    }
  }
});

For checking try this in the console first and add snippet to your JS file.

Answer 2

If you look into the js file in the toolbar core module , there is no event like this triggered.

I you want this event, i think you'll have to override or extend the toolbar behaviors.

For exemple :

(function ($, Drupal, drupalSettings) {
    var behaviorsToolbar = Drupal.behaviors.toolbar;

    Drupal.behaviors.toolbar = {
        attach: function attach(context) {
            behaviorsToolbar.attach(context); 
            $(document).trigger('toolbar.loaded');
        }
    };
    //this is just a exemple but it worked for me, to force horizontal toolbar
    $(document).on('toolbar.loaded', function () { 
        if ($('.toolbar-toggle-orientation button').hasClass('toolbar-icon-toggle-vertical'))
            $('.toolbar-toggle-orientation button').trigger('click');

    });

})(jQuery, Drupal, drupalSettings);

We have to be sure that this script is call every time a toolbar is created, so we attach it on the toolbar itself :

/**
 * Implements hook_toolbar_alter().
 */
function mymodule_toolbar_alter(&$items) { 
    $items['administration']['#attached']['library'][] = 'nameOfYourLibrary';
}

Answer 3

This is the cleanest and most reliable solution I've found so far. It uses localStorage and view models like the core toolbar itself. These are the important parts of my module:

toolbar_always_vertical.info.yml

name: 'Toolbar always vertical on the left'
type: module
description: 'Shows the toolbar by default in vertical mode, on the left side and hide it on frontend pages.'
core: 8.x
dependencies:
  - toolbar

toolbar_always_vertical.libaries.yml

toolbar:
  version: 0.0.1
  js:
    js/toolbar.js: {}
  dependencies:
    - toolbar/toolbar

toolbar_always_vertical.module

function toolbar_always_vertical_preprocess_html(&$variables) {
  $variables['#attached']['library'][] = 'toolbar_always_vertical/toolbar';
}

js/toolbar.js

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.toolbarAlwaysVerticalSetToolbarDefaults = {
    attach: function (context, settings) {
      if (Drupal.toolbar.views.toolbarVisualView) {
        // this forces the vertical orientation
        localStorage.setItem('Drupal.toolbar.trayVerticalLocked', 'true');
        Drupal.toolbar.views.toolbarVisualView.model.set({locked: true, orientation: 'vertical'}, {validate: true, override: true});
        if (drupalSettings.path.currentPathIsAdmin && Drupal.toolbar.views.toolbarVisualView.model.attributes.isFixed) {
          // show administration toolbar when in admin and not collapsed
          Drupal.toolbar.views.toolbarVisualView.model.set({activeTab: $('#toolbar-item-administration')});
        }
        else {
          // hide toolbar when on frontend page
          Drupal.toolbar.views.toolbarVisualView.model.set({activeTab: null});
        }
      }
    }
  };
})(jQuery, Drupal, drupalSettings);

There is a critical point all other answers missed: it has to be done in a module and not in a theme, because only modules can add dependencies to other modules and guarantee that the code is exectued after the core toolbar.

Answer 4

Try please this code:

Drupal.behaviors.changeToolbar = {
  attach: function (context, settings) {
    // Your code (if) ...
    $(context).find('#toolbar-bar').click('.toolbar-toggle-orientation button'); // Change orientation.
    $(context).find('#toolbar-bar').click('.toolbar-item-administration'); // Close.
  }
};

Answer 5

In the top-right corner of the Admin section there is a left-facing arrow, which, when you hover over it says "Vertical orientation". Is this not an easy way to achieve this?