navigation.html.twig

{#
/**
 * @file
 * Default theme implementation to display a navigation layout.
 *
 * Available variables:
 * - content: The content for this layout.
 * - attributes: HTML attributes for the layout <div>.
 * - hide_logo: Whether to hide the logo.
 * - logo_path: The path to the logo image if logo_managed in
 *   navigation.settings configuration has been set.
 * - logo_width: The width of the logo image. Available if
 *   logo_path points to a valid image file.
 * - logo_height: The height of the logo image. Available if
 *   logo_path points to a valid image file.
 *
 * @ingroup themeable
 */
#}
{% set control_bar_attributes = create_attribute() %}

<div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '').setAttribute('data-offset-top', '') }}>
  <div class="admin-toolbar-control-bar__content">
    {% include '@navigation/toolbar-button.html.twig' with {
      attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
      icon: 'burger',
      text: 'Expand sidebar'|t,
      extra_classes: 'admin-toolbar-control-bar__burger',
    } only %}
  </div>
</div>

<aside
  {{ attributes.addClass('admin-toolbar').setAttribute('id', 'admin-toolbar').setAttribute('data-drupal-admin-styles', true) }}
>
  {# This lil' div will get the Drupal.displace() attributes added to it via JS. #}
  <div class="admin-toolbar__displace-placeholder"></div>

  <div class="admin-toolbar__scroll-wrapper">
    {% set title_menu = 'admin-toolbar-title'|clean_unique_id %}

    {# @todo - We should get rid of this ID below. #}
    <nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>
      <h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>
      {# @todo - Needs to be placed here so we can have the header footer on mobile. #}
      <div class="admin-toolbar__header">
        {% if not hide_logo %}
          <a class="admin-toolbar__logo" href="{{ path('<front>') }}">
            {% if logo_path %}
              <img alt="{{ 'Navigation logo'|t }}" src="{{ file_url(logo_path) }}" loading="eager" width="{{ logo_width|default(40) }}" height="{{ logo_height|default(40) }}">
            {% else %}
              {% include '@navigation/logo.svg.twig' with {
                label: 'Navigation logo'|t
              } only %}
            {% endif %}
          </a>
        {% endif %}
        {% include '@navigation/toolbar-button.html.twig' with {
          attributes: create_attribute({ 'data-toolbar-back-control': true, 'tabindex': '-1' }),
          extra_classes: 'admin-toolbar__back-button',
          icon: 'back',
          text: 'Back'|t,
        } only %}
        {% include '@navigation/toolbar-button.html.twig' with {
           attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
          extra_classes: 'admin-toolbar__close-button',
          icon: 'cross',
          label_classes: 'visually-hidden',
          text: 'Collapse sidebar'|t,
        } only %}
      </div>

      {{ content.content }}
    </nav>

    {% set title_menu_footer = 'admin-toolbar-footer'|clean_unique_id %}
    <nav {{ region_attributes.footer.setAttribute('id', 'menu-footer').addClass('admin-toolbar__footer').setAttribute('aria-labelledby', title_menu_footer) }}>
      <h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>
      {{ content.footer }}
      <button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">
        <span class="visually-hidden" data-text>{{ 'Collapse sidebar'|t }}</span>
      </button>
    </nav>
  </div>
</aside>
<div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles></div>
<script>
  if (localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false' && (window.matchMedia('(min-width: 1024px)').matches)) {
    document.documentElement.setAttribute('data-admin-toolbar', 'expanded');
  }
</script>