Icon not showing while edit mode is on

Created on 13 March 2025, 23 days ago

Problem/Motivation

Thanks for the module.
While the edit mode is on, the icons for each button in the top bar area are not visible.

Steps to reproduce

  1. Install this module.
  2. Go to a node page. For example /node/1
  3. Switch to the edit mode.

Test environment:

Drupal core version: 11.1.4
Navigation + version: 2.0.2
Admin theme: Claro 11.1.4 (administration theme)
Front theme: Olivero 11.1.4 (default theme)

Proposed resolution

TBD

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇦🇺Australia mingsong 🇦🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mingsong
  • 🇮🇳India divyansh.gupta Jaipur

    Hello,
    I tried the steps you asked to reproduce in Drupal core version: 11.1.4, Navigation + version: 2.0.2, Admin theme: Claro 11.1.4 (administration theme), Front theme: Olivero 11.1.4 (default theme), but for me it is coming as expected.

  • 🇦🇺Australia mingsong 🇦🇺

    My HTML markup rendered as below

    <nav id="menu-builder" class="admin-toolbar__content" aria-labelledby="admin-toolbar-title">
          <h3 id="admin-toolbar-title" class="visually-hidden">Administrative toolbar content</h3>
                <div class="admin-toolbar__header">
                      <a class="admin-toolbar__logo" href="/">
                              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32" role="img" aria-label="Navigation logo">
      <rect fill="#347efe" width="32" height="32" rx="8"></rect>
      <path fill="#fff" d="M19,10.3C17.67,9,16.38,7.68,16,6.23,15.62,7.67,14.33,9,13,10.3c-2,2-4.31,4.31-4.31,7.74a7.32,7.32,0,0,0,14.64,0C23.32,14.61,21,12.32,19,10.3Zm-7.22,9.44c-.45,0-2.11-2.87,1-5.91l2,2.22a.18.18,0,0,1,0,.25h0A19.3,19.3,0,0,0,12,19.6C11.92,19.75,11.83,19.74,11.79,19.74ZM16,23.51A2.52,2.52,0,0,1,13.48,21a2.56,2.56,0,0,1,.63-1.66c.45-.56,1.89-2.12,1.89-2.12s1.41,1.59,1.89,2.11A2.5,2.5,0,0,1,18.52,21,2.52,2.52,0,0,1,16,23.51Zm4.82-4.09c-.06.12-.18.32-.35.33s-.32-.14-.55-.47c-.48-.71-4.67-5.09-5.46-5.94s-.09-1.27.18-1.55L16,10.44a35.72,35.72,0,0,1,4.25,4.8A4.5,4.5,0,0,1,20.82,19.42Z"></path>
    </svg>
                          </a>
                    <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <button data-toolbar-back-control="" tabindex="-1" data-component-id="navigation:toolbar-button" data-index-text="b" data-icon-text="Ba" class="toolbar-button toolbar-button--icon--back admin-toolbar__back-button">
                  <span class="toolbar-button__label" data-toolbar-text="">Back</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->        <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
    
    <button aria-controls="admin-toolbar" tabindex="-1" type="button" data-component-id="navigation:toolbar-button" class="toolbar-button toolbar-button--icon--cross admin-toolbar__close-button" data-once="admin-toolbar-trigger" aria-expanded="false">
          <span data-toolbar-action="" class="visually-hidden">Expand sidebar</span>
              
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->      </div>
    
          
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'navigation_content_top' -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/navigation-content-top.html.twig' -->
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/navigation-content-top.html.twig' -->
    
    
          
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'block__navigation' -->
    <!-- FILE NAME SUGGESTIONS:
       ✅ block--navigation.html.twig
       ✅ block--navigation.html.twig
       ▪️ block--navigation-shortcuts.html.twig
       ✅ block--navigation.html.twig
       ▪️ block.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    <div class="toolbar-block navigation-plus-hidden">
      
        
          
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'navigation_menu' -->
    <!-- FILE NAME SUGGESTIONS:
       ✅ navigation-menu.html.twig
       ✅ navigation-menu.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    <div class="admin-toolbar__item">
      <h4 class="visually-hidden focusable">Shortcuts</h4>
      <ul class="toolbar-block__list">
          
        
        
                  
                          <li id="navigation-link---3" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover="" data-once="toolbar-popover">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <button aria-expanded="false" aria-controls="navigation-link---3" data-toolbar-popover-control="" data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="Sh" class="toolbar-button toolbar-button--icon--shortcuts toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control" data-once="safe-triangle" style="--safe-triangle-cursor-x: 153px; --safe-triangle-cursor-y: 103px;">
          <span data-toolbar-action="" class="visually-hidden">Extend</span>
                  <span class="toolbar-button__label" data-toolbar-text="">Shortcuts</span>
          
    <div data-safe-triangle=""></div></button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper="" inert="true">
                              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <span data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="Sh" class="toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive toolbar-popover__header">
                  <span class="toolbar-button__label" data-toolbar-text="">Shortcuts</span>
          
    </span>
    <!-- 🥫 Component end: navigation:toolbar-button -->                        <ul class="toolbar-menu toolbar-popover__menu">
                    
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a href="/node/add" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="Ad" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Add content</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a href="/admin/content" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="Al" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">All content</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
                </ul>
              </div>
            </li>
          
          
      </ul>
    </div>
    
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    
    
      </div>
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    
    
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'block__navigation' -->
    <!-- FILE NAME SUGGESTIONS:
       ✅ block--navigation.html.twig
       ✅ block--navigation.html.twig
       ▪️ block--navigation-menu--content.html.twig
       ▪️ block--navigation-menu.html.twig
       ✅ block--navigation.html.twig
       ▪️ block.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    <div class="toolbar-block navigation-plus-hidden">
      
        
          
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'navigation_menu__content' -->
    <!-- FILE NAME SUGGESTIONS:
       ▪️ navigation-menu--content.html.twig
       ✅ navigation-menu.html.twig
       ✅ navigation-menu.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    <div class="admin-toolbar__item">
      <h4 class="visually-hidden focusable">Content</h4>
      <ul class="toolbar-block__list">
          
        
                  
                  
                          <li id="navigation-link-navigationcreate" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover="" data-once="toolbar-popover">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <button aria-expanded="false" aria-controls="navigation-link-navigationcreate" data-toolbar-popover-control="" data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Cr" class="toolbar-button toolbar-button--icon--navigation-create toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control" data-once="safe-triangle" style="--safe-triangle-cursor-x: 261px; --safe-triangle-cursor-y: 289px;">
          <span data-toolbar-action="" class="visually-hidden">Extend</span>
                  <span class="toolbar-button__label" data-toolbar-text="">Create</span>
          
    <div data-safe-triangle=""></div></button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper="" inert="true">
                              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <a href="/node/add" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Cr" class="toolbar-button toolbar-button--large toolbar-button--dark toolbar-popover__header" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Create</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->                        <ul class="toolbar-menu toolbar-popover__menu">
                    
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a href="/node/add/article" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="Ar" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Article</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a href="/node/add/page" data-component-id="navigation:toolbar-button" data-index-text="b" data-icon-text="Ba" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Basic page</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a href="/admin/people/create" data-component-id="navigation:toolbar-button" data-index-text="u" data-icon-text="Us" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">User</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
                </ul>
              </div>
            </li>
          
          
        
                  
                  
                          <li id="navigation-link-navigationblocks" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a href="/admin/content/block" data-drupal-tooltip="Blocks" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="b" data-icon-text="Bl" class="toolbar-button toolbar-button--icon--navigation-blocks toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Blocks</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Blocks
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
        
                  
                  
                          <li id="navigation-link-navigationcontent" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a href="/admin/content" data-drupal-tooltip="Content" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button toolbar-button--icon--navigation-content toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Content</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Content
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
        
                  
                  
                          <li id="navigation-link-navigationfiles" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a href="/admin/content/files" data-drupal-tooltip="Files" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="f" data-icon-text="Fi" class="toolbar-button toolbar-button--icon--navigation-files toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Files</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Files
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
      </ul>
    </div>
    
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    
    
      </div>
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    
    
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'block__navigation' -->
    <!-- FILE NAME SUGGESTIONS:
       ✅ block--navigation.html.twig
       ✅ block--navigation.html.twig
       ▪️ block--navigation-menu--admin.html.twig
       ▪️ block--navigation-menu.html.twig
       ✅ block--navigation.html.twig
       ▪️ block.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    <div class="toolbar-block navigation-plus-hidden">
      
        
          
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'navigation_menu__admin' -->
    <!-- FILE NAME SUGGESTIONS:
       ▪️ navigation-menu--admin.html.twig
       ✅ navigation-menu.html.twig
       ✅ navigation-menu.html.twig
    -->
    <!-- BEGIN OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    <div class="admin-toolbar__item">
      <h4 class="visually-hidden focusable">Administration</h4>
      <ul class="toolbar-block__list">
          
        
                  
                  
                          <li id="navigation-link-systemadmin-structure" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover="" data-once="toolbar-popover">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <button aria-expanded="false" aria-controls="navigation-link-systemadmin-structure" data-toolbar-popover-control="" data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="St" class="toolbar-button toolbar-button--icon--system-admin-structure toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control" data-once="safe-triangle">
          <span data-toolbar-action="" class="visually-hidden">Extend</span>
                  <span class="toolbar-button__label" data-toolbar-text="">Structure</span>
          
    <div data-safe-triangle=""></div></button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper="" inert="true">
                              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <a title="Administer blocks, content types, menus, etc." href="/admin/structure" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="St" class="toolbar-button toolbar-button--large toolbar-button--dark toolbar-popover__header" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Structure</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->                        <ul class="toolbar-menu toolbar-popover__menu">
                    
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Configure what block content appears in your site's sidebars and other regions." href="/admin/structure/block" data-component-id="navigation:toolbar-button" data-index-text="b" data-icon-text="Bl" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Block layout</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Create and manage fields, forms, and display settings for your content blocks." href="/admin/structure/block-content" data-component-id="navigation:toolbar-button" data-index-text="b" data-icon-text="Bl" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Block types</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Manage form and displays settings of comments." href="/admin/structure/comment" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Comment types</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Create and manage contact forms." href="/admin/structure/contact" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Contact forms</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Create and manage fields, forms, and display settings for your content." href="/admin/structure/types" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Content types</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="d" data-icon-text="Di" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Display modes</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/structure/display-modes/form" title="Manage custom form modes." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="f" data-drupal-link-system-path="admin/structure/display-modes/form" data-once="toolbar-menu-link">Form modes</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/structure/display-modes/view" title="Manage custom view modes." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="v" data-drupal-link-system-path="admin/structure/display-modes/view" data-once="toolbar-menu-link">View modes</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Manage menus and menu links." href="/admin/structure/menu" data-component-id="navigation:toolbar-button" data-index-text="m" data-icon-text="Me" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Menus</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Manage tagging, categorization, and classification of your content." href="/admin/structure/taxonomy" data-component-id="navigation:toolbar-button" data-index-text="t" data-icon-text="Ta" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Taxonomy</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Manage customized lists of content." href="/admin/structure/views" data-component-id="navigation:toolbar-button" data-index-text="v" data-icon-text="Vi" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Views</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
                </ul>
              </div>
            </li>
          
          
        
                  
                  
                          <li id="navigation-link-systemthemes-page" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a title="Select and configure themes." href="/admin/appearance" data-drupal-tooltip="Appearance" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="Ap" class="toolbar-button toolbar-button--icon--system-themes-page toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Appearance</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Appearance
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
        
                  
                  
                          <li id="navigation-link-systemmodules-list" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a title="Add and install modules to extend site functionality." href="/admin/modules" data-drupal-tooltip="Extend" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="e" data-icon-text="Ex" class="toolbar-button toolbar-button--icon--system-modules-list toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Extend</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Extend
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
        
                  
                  
                          <li id="navigation-link-systemadmin-config" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover="" data-once="toolbar-popover">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <button aria-expanded="false" aria-controls="navigation-link-systemadmin-config" data-toolbar-popover-control="" data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button toolbar-button--icon--system-admin-config toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control" data-once="safe-triangle">
          <span data-toolbar-action="" class="visually-hidden">Extend</span>
                  <span class="toolbar-button__label" data-toolbar-text="">Configuration</span>
          
    <div data-safe-triangle=""></div></button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper="" inert="true">
                              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <a title="Administer settings." href="/admin/config" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button toolbar-button--large toolbar-button--dark toolbar-popover__header" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Configuration</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->                        <ul class="toolbar-menu toolbar-popover__menu">
                    
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="p" data-icon-text="Pe" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">People</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/people/accounts" title="Configure default user account settings, including fields, registration requirements, and email messages." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="a" data-drupal-link-system-path="admin/config/people/accounts" data-once="toolbar-menu-link">Account settings</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="Sy" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">System</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/system/site-information" title="Change site name, email address, slogan, default front page, and error pages." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="b" data-drupal-link-system-path="admin/config/system/site-information" data-once="toolbar-menu-link">Basic site settings</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/system/cron" title="Manage automatic site maintenance tasks." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="c" data-drupal-link-system-path="admin/config/system/cron" data-once="toolbar-menu-link">Cron</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/system/keys" title="Manage site-wide keys." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="k" data-drupal-link-system-path="admin/config/system/keys" data-once="toolbar-menu-link">Keys</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="c" data-icon-text="Co" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Content authoring</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/content/formats" title="Select and configure text editors, and how content is filtered when displayed." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="t" data-drupal-link-system-path="admin/config/content/formats" data-once="toolbar-menu-link">Text formats and editors</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="u" data-icon-text="Us" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">User interface</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/user-interface/navigation-block" title="Manage navigation blocks." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="n" data-drupal-link-system-path="admin/config/user-interface/navigation-block" data-once="toolbar-menu-link">Navigation blocks</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/user-interface/shortcut" title="Add and modify shortcut sets." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="s" data-drupal-link-system-path="admin/config/user-interface/shortcut" data-once="toolbar-menu-link">Shortcuts</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/user-interface/navigation/settings" title="Configure different settings for the Navigation module." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="n" data-drupal-link-system-path="admin/config/user-interface/navigation/settings" data-once="toolbar-menu-link">Navigation Settings</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="d" data-icon-text="De" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Development</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/development/performance" title="Configure caching and bandwidth optimization." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="p" data-drupal-link-system-path="admin/config/development/performance" data-once="toolbar-menu-link">Performance</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/development/settings" title="Configure theme development settings" class="toolbar-menu__link toolbar-menu__link--2" data-index-text="d" data-drupal-link-system-path="admin/config/development/settings" data-once="toolbar-menu-link">Development settings</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/development/logging" title="Configure the display of error messages and database logging." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="l" data-drupal-link-system-path="admin/config/development/logging" data-once="toolbar-menu-link">Logging and errors</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/development/maintenance" title="Take the site offline for updates and other maintenance tasks." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="m" data-drupal-link-system-path="admin/config/development/maintenance" data-once="toolbar-menu-link">Maintenance mode</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/development/configuration" title="Import and export your configuration." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="c" data-drupal-link-system-path="admin/config/development/configuration" data-once="toolbar-menu-link">Configuration synchronization</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="m" data-icon-text="Me" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Media</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/media/file-system" title="Configure the location of uploaded files and how they are accessed." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="f" data-drupal-link-system-path="admin/config/media/file-system" data-once="toolbar-menu-link">File system</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/media/image-styles" title="Configure styles that can be used for resizing or adjusting images on display." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="i" data-drupal-link-system-path="admin/config/media/image-styles" data-once="toolbar-menu-link">Image styles</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/media/image-toolkit" title="Choose which image toolkit to use if you have installed optional toolkits." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="i" data-drupal-link-system-path="admin/config/media/image-toolkit" data-once="toolbar-menu-link">Image toolkit</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="Se" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Search and metadata</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/search/pages" title="Configure search pages and search indexing options." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="s" data-drupal-link-system-path="admin/config/search/pages" data-once="toolbar-menu-link">Search pages</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/search/path" title="Add custom URLs to existing paths." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="u" data-drupal-link-system-path="admin/config/search/path" data-once="toolbar-menu-link">URL aliases</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="r" data-icon-text="Re" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Region and language</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/regional/settings" title="Configure the locale and timezone settings." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="r" data-drupal-link-system-path="admin/config/regional/settings" data-once="toolbar-menu-link">Regional settings</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/regional/date-time" title="Configure how dates and times are displayed." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="d" data-drupal-link-system-path="admin/config/regional/date-time" data-once="toolbar-menu-link">Date and time formats</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="AI" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">AI</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/ai/settings" title="Configure the core AI Settings." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="a" data-drupal-link-system-path="admin/config/ai/settings" data-once="toolbar-menu-link">AI Default Settings</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/ai/logging" title="Setup and view AI Logs." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="a" data-drupal-link-system-path="admin/config/ai/logging" data-once="toolbar-menu-link">AI Logging</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/ai/providers" title="Configure the core Provider Settings." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="p" data-drupal-link-system-path="admin/config/ai/providers" data-once="toolbar-menu-link">Provider Settings</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="w" data-icon-text="We" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Web services</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/services/rss-publishing" title="Configure the site description, the number of items per feed, and whether feeds should be titles/teasers/full-text." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="r" data-drupal-link-system-path="admin/config/services/rss-publishing" data-once="toolbar-menu-link">RSS publishing</a>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/services/linkset" title="Enable or disable the menu linkset endpoint" class="toolbar-menu__link toolbar-menu__link--2" data-index-text="m" data-drupal-link-system-path="admin/config/services/linkset" data-once="toolbar-menu-link">Menu Linkset Settings</a>
                  </li>
          
              </ul>
                  </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <button aria-expanded="false" data-toolbar-menu-trigger="1" data-component-id="navigation:toolbar-button" data-index-text="w" data-icon-text="Wo" class="toolbar-button toolbar-button--expand--down" data-once="toolbar-menu-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Workflow</span>
          
    </button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <ul class="toolbar-menu toolbar-menu--level-2" inert="true">
                  
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-2">
                      <a href="/admin/config/workflow/workflows" title="Configure workflows." class="toolbar-menu__link toolbar-menu__link--2" data-index-text="w" data-drupal-link-system-path="admin/config/workflow/workflows" data-once="toolbar-menu-link">Workflows</a>
                  </li>
          
              </ul>
                  </li>
          
                </ul>
              </div>
            </li>
          
          
        
                  
                  
                          <li id="navigation-link-entityusercollection" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a title="Manage user accounts, roles, and permissions." href="/admin/people" data-drupal-tooltip="People" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="p" data-icon-text="Pe" class="toolbar-button toolbar-button--icon--entity-user-collection toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">People</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          People
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
        
                  
                  
                          <li id="navigation-link-systemadmin-reports" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover="" data-once="toolbar-popover">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <button aria-expanded="false" aria-controls="navigation-link-systemadmin-reports" data-toolbar-popover-control="" data-has-safe-triangle="" data-component-id="navigation:toolbar-button" data-index-text="r" data-icon-text="Re" class="toolbar-button toolbar-button--icon--system-admin-reports toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control" data-once="safe-triangle">
          <span data-toolbar-action="" class="visually-hidden">Extend</span>
                  <span class="toolbar-button__label" data-toolbar-text="">Reports</span>
          
    <div data-safe-triangle=""></div></button>
    <!-- 🥫 Component end: navigation:toolbar-button -->          <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper="" inert="true">
                              <!-- 🥫 Component start: navigation:toolbar-button -->
      
      
          
    <a title="View reports, updates, and errors." href="/admin/reports" data-component-id="navigation:toolbar-button" data-index-text="r" data-icon-text="Re" class="toolbar-button toolbar-button--large toolbar-button--dark toolbar-popover__header" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Reports</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->                        <ul class="toolbar-menu toolbar-popover__menu">
                    
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Get a status report about your site's operation." href="/admin/reports/status" data-component-id="navigation:toolbar-button" data-index-text="s" data-icon-text="St" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Status report</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Get a status report about available updates for your installed modules and themes." href="/admin/reports/updates" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="Av" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Available updates</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="View events that have recently been logged." href="/admin/reports/dblog" data-component-id="navigation:toolbar-button" data-index-text="r" data-icon-text="Re" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Recent log messages</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Overview of fields on all entity types." href="/admin/reports/fields" data-component-id="navigation:toolbar-button" data-index-text="f" data-icon-text="Fi" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Field list</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="View 'access denied' errors (403s)." href="/admin/reports/access-denied" data-component-id="navigation:toolbar-button" data-index-text="t" data-icon-text="To" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Top 'access denied' errors</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="View 'page not found' errors (404s)." href="/admin/reports/page-not-found" data-component-id="navigation:toolbar-button" data-index-text="t" data-icon-text="To" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Top 'page not found' errors</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="View most popular search phrases." href="/admin/reports/search" data-component-id="navigation:toolbar-button" data-index-text="t" data-icon-text="To" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Top search phrases</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
        
                  
                  
                  <li class="toolbar-menu__item toolbar-menu__item--level-1">
                      <!-- 🥫 Component start: navigation:toolbar-button -->
    
      
          
    <a title="Overview of plugins used in all views." href="/admin/reports/views-plugins" data-component-id="navigation:toolbar-button" data-index-text="v" data-icon-text="Vi" class="toolbar-button" data-once="toolbar-menu-link">
                  <span class="toolbar-button__label" data-toolbar-text="">Views plugins</span>
          
    </a>
    <!-- 🥫 Component end: navigation:toolbar-button -->              </li>
          
                </ul>
              </div>
            </li>
          
          
        
                  
                  
                          <li id="navigation-link-announcements-feedannouncement" class="toolbar-block__list-item">
              <!-- 🥫 Component start: navigation:toolbar-button -->
      
    
          
    <a title="Displays announcements from the Drupal community." href="/admin/announcements_feed" data-drupal-tooltip="Announcements" data-drupal-tooltip-class="admin-toolbar__tooltip" data-component-id="navigation:toolbar-button" data-index-text="a" data-icon-text="An" class="toolbar-button toolbar-button--icon--announcements-feed-announcement toolbar-button--collapsible" data-once="toolbar-menu-link tooltip-trigger">
                  <span class="toolbar-button__label" data-toolbar-text="">Announcements</span>
          
    </a><div class="toolbar-tooltip admin-toolbar__tooltip" style="left: 6px; top: 16px;">
          Announcements
        </div>
    <!-- 🥫 Component end: navigation:toolbar-button -->        </li>
          
          
      </ul>
    </div>
    
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/navigation-menu.html.twig' -->
    
    
      </div>
    
    <!-- END OUTPUT from 'core/modules/navigation/templates/block--navigation.html.twig' -->
    
    
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'container' -->
    <!-- BEGIN OUTPUT from 'core/modules/system/templates/container.html.twig' -->
    <div id="navigation-plus-edit" class="toolbar-block navigation-plus-mode">
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'container' -->
    <!-- BEGIN OUTPUT from 'core/modules/system/templates/container.html.twig' -->
    <div class="admin-toolbar__item"><h4 class="visually-hidden focusable">Editing Toolbar</h4>
    
    
    <!-- THEME DEBUG -->
    <!-- THEME HOOK: 'item_list' -->
    <!-- 💡 BEGIN CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/dataset/item-list.html.twig' -->
    <ul class="toolbar-block__list"><li class="toolbar-block__list-item"><a href="javascript:void(0)" data-tool="pointer" class="toolbar-button toolbar-button--collapsible navigation-plus-button toolbar-button--icon--pointer" data-once="toolbar-menu-link NavigationPlusEditMode"><span class="toolbar-button__label">Preview</span></a><style>.toolbar-button--icon--pointer {
      --icon: url('/modules/contrib/navigation_plus/assets/cursor.svg');
    }
    .toolbar-button--icon--refresh {
      --icon: url('/modules/contrib/navigation_plus/assets/refresh.svg');
    }
    .toolbar-button--icon--save {
      --icon: url('/modules/contrib/navigation_plus/assets/save.svg');
    }
    .toolbar-button--icon--discard-changes {
      --icon: url('/modules/contrib/navigation_plus/assets/discard-changes.svg');
    }
    </style></li><li class="toolbar-block__list-item"><a href="javascript:void(0)" data-tool="edit_plus" class="toolbar-button toolbar-button--collapsible navigation-plus-button toolbar-button--icon--edit_plus active" data-once="toolbar-menu-link NavigationPlusEditMode"><span class="toolbar-button__label">Edit</span></a><style>.edit_plus,
    .edit_plus a {
      cursor: url('/modules/contrib/edit_plus/assets/text-mouse.svg') 0 2, auto;
    }
    .toolbar-button--icon--edit_plus {
      --icon: url('/modules/contrib/edit_plus/assets/pencil.svg');
    }
    </style></li></ul>
    <!-- END CUSTOM TEMPLATE OUTPUT from 'core/themes/olivero/templates/dataset/item-list.html.twig' -->
    
    </div>
    
    <!-- END OUTPUT from 'core/modules/system/templates/container.html.twig' -->
    
    </div>
    
    <!-- END OUTPUT from 'core/modules/system/templates/container.html.twig' -->
    
    
        </nav>
    
  • 🇦🇺Australia mingsong 🇦🇺

    Dig more deeper, I think it because the CSS rule '[class*="toolbar-button--icon"]::before' didn't apply to this a tag of those buttons. Don't know why, but without having that rule, the icon won't be used as the background image of the buttons.

  • 🇺🇸United States tim bozeman

    It looks like the tag is missing data-icon-text="Bl" which is messing things up. Thanks for looking into it!

    • tim bozeman committed fe549cde on 1.0.x
      Issue #3512641 by mingsong, tim bozeman: Icon not showing while edit...
    • tim bozeman committed 964683ce on 2.0.x
      Issue #3512641 by mingsong, tim bozeman: Icon not showing while edit...
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024