Admin Toolbar Extra Tools items on /admin/index

This page comes from core and show all the links available on each module.

One option is to copy the core/themes/stable/templates/admin/admin-block-content.html.twig file and put it in the current theme folder to act as an override and just code the display to meet the requirements.

You could also use a purely client-side approach via behaviors / JavaScript to target an element corresponding to the Admin Toolbar panel content and once that's been found, style to spec.

None of these approaches are that great but they're not horrible, either. I mean, it's better than just closing the issue with no suggestions.

For anyone seeing this (and until this module accommodates a better approach), it might be worth implementing a custom behavior for the admin toolbar along the following lines in an effort to better organize the panels this things generates in the admin/index screen:

1.) Create a custom module which provides a custom JavaScript (behaviors) file and a custom CSS file. Here's an idea of what to use for your libraries file:
admin.index:

  js:
    js/admin_index.js: {}
  css:
    theme:
      css/admin_index.css: {}
  dependencies:
    - core/drupalSettings

2.) In the *.module file of your custom module, add a preprocess_page hook to attach to admin/index both your custom behavior and CSS files:

/**
 * Implements hook_preprocess_page().
 */
function <your_module_name>_preprocess_page(&$variables){
	
	global $base_url;
	//kint($base_url);

	$current_path	= ltrim(\Drupal::service('path.current')->getPath(), '/');//Gets current path without preceding forward-slash...

	if($current_path === 'admin/index'){
		$variables['#attached']['library'][]				= '<your_module_name>/admin.index';
		$variables['#attached']['drupalSettings']['base_url']	= $base_url;
	}
}

3.) Because the current Admin Toolbar lacks any real organization of the links it exposes, the quandary you'll want to solve is how the overall organization of its links is done when it also lacks labels for every link one might wish to have in order to better understand which links do which things (for example and with utility in mind, there are numerous "Add link" links, "Delete" links, etc. that you can only surmise the purpose of when hovering over their hyperlinks to see what their respective endpoints are at the bottom of the browser). So one possibility to fix this is to find all the "dt" element links and group them all into their respective utility group, such as a group for all the "Add link" links, all the "Delete" links, etc. HTML5 standards seem to make it sound as if dts can be contained in a dd container (but not vice-versa), so how you wish to solve all this boils down to your design preferences. I personally solved this by the grouping idea I suggested above by using the following behavior logic (it's not perfect but it's 100x better than what comes out of the can):

(function ($, Drupal) {
	'use strict';
  Drupal.behaviors.adminindex = {
    attach: function (context, settings) {
		
		//console.log(settings);

		var base = settings.base_url,//Received from the "*.module" PHP file and is used to assist in removing a piece of the URLs which later gets used as headings for the links...
			stop = false,
			last = '',
			container = '';
	
		$(context).find('#wrapper .compact-link').once().append('<a href="#" id="expand_toggle">Expand all</a>');

		$(context).find('#expand_toggle').click(function(e){
			e.preventDefault();
			
			//Open only those needing to be opened...
			if($(this).text() === 'Expand all'){
				$('.panel').each(function(){
					if(!$(this).hasClass('expanded'))
						$(this).trigger('click');
				});
			}

			//Close only those needing to be closed...
			if($(this).text() === 'Contract all'){
				$('.panel').each(function(){
					if($(this).hasClass('expanded'))
						$(this).trigger('click');
				});
			}

			$('#expand_toggle').text($('#expand_toggle').text() === 'Contract all' ? 'Expand all' : 'Contract all');//Adds an "Expand all" / "Contract all" link up near the "Hide descriptions" link for convenient expansion / contraction of any truncation...
		});
		
		
		$(context).find('#wrapper .panel').once().each(function(){
			$(this).append('<div class="expand_toggle"></div>');

			if($(this).prop('scrollHeight') > $(this).outerHeight()){
				$(this).addClass('expandable');

				$(this).on('mouseenter mouseleave', function(){
					$(this).toggleClass('mouseover');
				});

				$(this).click(function(e){
					e.preventDefault();
					$(this).toggleClass('expanded');
				});
			}else{
				$(this).addClass('unexpandable');
			}
			
		});

		//Remove empty descriptions...
		$(context).find('#wrapper .panel dd').each(function(){
			if($(this).text() === '')
				$(this).remove();
		});

		//Fix the dts...
		$(context).find('#wrapper .panel dt a').once().each(function(){	
			last = $(this).parent();

			if($(this).text() === $(this).parent().next().find('a').text()){
				
				if(!stop){
					$(this).parent().before('<dd class="sub_list">');
					container = $(this).parent().prev();
					container.append('<dt class="list-group__heading" title="'+$(this).text()+'">'+$(this).text()+'</dt>');
				}
				

				var clone = $(this).parent().clone();
				
				clone.find('a').text("\u22C4\u0020"+clone.find('a').prop('href').replace(base, ''));

				container.append(clone);

				$(this).parent().remove();
				
				stop = true;
			}else{
				if(container.length > 0 && last.length > 0){
					last.find('a').text("\u22C4\u0020"+last.find('a').prop('href').replace(base, ''));
					container.append(last);
				}
				stop = false;
				container = '';
				last = '';
			}

		});

		$(context).find('#wrapper .list-group__heading').hover(function(){
			$(this).parent().toggleClass('hover');
		});


		$(context).find('#wrapper .list-group__heading').on('click', function(){
			$(this).parent().toggleClass('expand');
			$(this).parent().find('.list-group__link').toggle();
		});

		function height_to_percent(elem){
			var page_height = $('#wrapper').height();
			return elem.height() / page_height * 100;
		}


    }
  };
})(jQuery, Drupal, drupalSettings);

...which basically takes all the links in each panel found on the admin/index page and groups them into a corresponding container dd element that uses a heading that reflects the links' purposes. This sub-list is then expandable and contactable via an appended div.expand_toggle element found at the end of each group but this logic also allows for truncation / expansion of each panel as well (let me know if you need the styling for it).

Again, it's not perfect but after doing all this, I wound up with a nicely-organized admin/index screen with properly-spaced panels, all having a toggle effect for itself as well as any utility-groupings. It turned out well! :)

I hope this helps and if anyone needs any additional details or help with doing this, let me know. I'll help if I can.

Here's an easier way to do this:

1). Copy admin-block.html.twig from core/modules/system/templates/admin-block.html.twig into your admin theme.
2). Add this twig:

{% set class = block.title %}
{% set class = class|replace({' ':''}) %}
{% set class = class|lower %}
{%
  set classes = [
    'panel',
     class,
  ]
%}

Then, the <code><div{{ attributes.addClass(classes) }}>

will include the class name of the region, in this case, admintoolbarsearch

Then, in your admin theme, just

div.admintoolbarextratools {
display:none;
}

The list that admin_toolbar_tools generate on admin/index is really cluttering the UI and the link titles are often confusing.

If you want to stop the output of admin_toolbar_tools before this actually is put on the site, you could use a Route Subscriber and override the core controller to exclude the links from admin_toolbar_tools.

Like so:

your_module.services.yml

services:
  your_module.route_subscriber:
    class: Drupal\your_module\Routing\RouteSubscriber
    tags:
      - { name: event_subscriber }

src/Routing/RouteSubscriber.php

<?php

namespace Drupal\your_module\Routing;

use Drupal\Core\Routing\RouteSubscriberBase;
use Symfony\Component\Routing\RouteCollection;

class RouteSubscriber extends RouteSubscriberBase {

  protected function alterRoutes(RouteCollection $collection) {
    if ($route_index = $collection->get('system.admin_index')) {
      $route_index->setDefault('_controller', '\Drupal\your_module\Controller\AdminController::index');
    }
  }

}

src/Controller/AdminController

<?php

namespace Drupal\your_module\Controller;

/*
 * hide the admin toolbar extra tools entries on admin/index as it clutters the UI.
 */
class AdminController extends \Drupal\system\Controller\AdminController {

  public function index() {
    $output = parent::index();
    if (isset($output['#menu_items']['Admin Toolbar Extra Tools'])) {
      unset($output['#menu_items']['Admin Toolbar Extra Tools']);
    }
    return $output;
  }
}