Crear facilmente un menú toolbar en Drupal 8

Imagen
Escritorio desordenado

Los menú toolbar personalmente me encantan y me parecen muy útiles cuando desarrollamos una web mas o menos compleja en la cual tenemos que añadir menos de configuración. Esto es porque nos permite separar nuestros menús del resto del administrador de Drupal.

Menu toolbar de nireneko

Este articulo será un tanto especial, ya que, aunque el menú toolbar se reduzca a un solo hook, habría que explicar mucho sobre como usarlo, los problemas que puede haber, son muchos archivos a crear y modificar, muchas lineas de código… A si que esta vez, será una explicación mas corta de lo normal, y la idea es que os descarguéis el código ya sea del repositorio o el archivo.

Como crear el menú toolbar

Todo se reduce a un solo hook, se llama hook_toolbar y en el tenemos que devolver un array renderizable con toda la información que necesitemos. Aquí lo que vamos a hacer es crear una clase, que será la que se encargara de gestionar ese array gigantesco.

Primero veamos hook_toolbar:

/**
 * Implements hook_toolbar().
 */
function nireneko_toolbar() {
  return \Drupal::service('class_resolver')
    ->getInstanceFromDefinition(ToolbarHandler::class)
    ->toolbar();
}

Lo que hacemos, es instanciar la clase ToolbarHandler que es la clase que usaremos para crear el array.

Ahora veamos el metodo ->toolbar(), que es el que contiene el array que creara el toolbar.

/**
   * Hook bridge.
   *
   * @return array
   *   The nireneko toolbar items render array.
   *
   * @see hook_toolbar()
   */
  public function toolbar() {
    $items['nireneko'] = [
      '#cache' => [
        'contexts' => ['user.permissions'],
      ],
    ];

    if ($this->account->hasPermission('access nireneko administration pages')) {

      $items['nireneko'] = [
        '#type' => 'toolbar_item',
        'tab' => [
          '#type' => 'link',
          '#title' => $this->t('Nireneko'),
          '#url' => Url::fromRoute('nireneko.admin'),
          '#attributes' => [
            'title' => $this->t('Nireneko'),
            'class' => [
              'toolbar-icon',
              'toolbar-icon-nireneko',
            ],
            'data-drupal-subtrees' => '',
            'data-toolbar-escape-admin' => TRUE,
          ],
        ],
        'tray' => [
          '#heading' => $this->t('@menu_label actions', ['@menu_label' => $this->t('Nireneko')]),
          'nireneko_menu' => [
            '#type' => 'container',
            '#id' => 'nireneko',
            '#pre_render' => ['nireneko_prerender_toolbar_tray'],
            '#attributes' => [
              'class' => ['toolbar-menu-administration'],
            ],
          ],
        ],
        '#weight' => 999,
        '#attached' => [
          'library' => [
            'nireneko/toolbar',
          ],
        ],
      ];
    }

    return $items;
  }

Por ultimo, crearemos la función que se encargara de preparar el menú que vamos a mostrar, esta función estará en el archivo nireneko.module.

function nireneko_prerender_toolbar_tray(array $element) {
  /** @var \Drupal\toolbar\Menu\ToolbarMenuLinkTree $menu_tree */
  $menu_tree = \Drupal::service('toolbar.menu_tree');

  $parameters = new MenuTreeParameters();
  $parameters->onlyEnabledLinks();

  $tree = $menu_tree->load('nireneko', $parameters);

  $manipulators = [
    ['callable' => 'menu.default_tree_manipulators:checkAccess'],
    ['callable' => 'menu.default_tree_manipulators:generateIndexAndSort'],
  ];
  $tree = $menu_tree->transform($tree, $manipulators);

  $element['nireneko'] = $menu_tree->build($tree);

  return $element;
}

Para que todo esto funcione, nos queda crear un menú, en este caso tendrá que tener la id como “nireneko”. Lo podemos crear desde “Estructura -> Menu” sin ningún problema, pero tendrá que ser antes de activar el modulo que contiene el hook_toolbar, de lo contrario, fallara por no encontrar un menú con ese nombre.

No explico mucho mas, ya que hay demasiado y el articulo se extendería en exceso, y creo que en este caso particular es mejor mostrar lo basico, para luego ya descargar el código y modificarlo o adaptarlo a nuestras necesidades entendiendo por lo menos de donde partir.

En el código tenéis ejemplos de como crear puntos de menos y rutas para usarlos con el toolbar, ademas de código js y css para dejarlo “bonito” junto con un controlador y servicio que ayudan un poquito.

Archivo