You are here

toolbar-themes--toolbar.html.twig in Toolbar Themes 8

{#
/**
 * Toolbar themes implementation for the administrative toolbar.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - toolbar_attributes: HTML attributes to apply to the toolbar.
 * - toolbar_heading: The heading or label for the toolbar.
 * - tabs: List of tabs for the toolbar.
 *   - attributes: HTML attributes for the tab container.
 *   - link: Link or button for the menu tab.
 *   - icon_attributes: tab icon classes and attributes to style SVG grunticons.
 * - trays: Toolbar tray list, each associated with a tab. Each tray in trays
 *   contains:
 *   - attributes: HTML attributes to apply to the tray.
 *   - label: The tray's label.
 *   - links: The tray menu links.
 * - remainder: Any non-tray, non-tab elements left to be rendered.
 * - show_icons: bool to show or hide icon markup.
 *
 * @see toobar_themes_preprocess_toolbar()
 *
 * @ingroup themeable
 */
#}
<div{{ attributes.addClass('toolbar') }}>
  {%
    set classes = [
      'toolbar-bar',
      show_icons ? 'has-icons' : 'no-icons',
      show_tabs ? 'has-tabs' : 'no-tabs',
    ]
  %}
  <nav{{ toolbar_attributes.addClass(classes).setAttribute('style', font_size) }}>
    <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
    {% for key, tab in tabs %}
      {% set tray = trays[key] %}
      <div{{ tab.attributes.addClass('toolbar-tab') }}>
        <span class="toolbar-tab__items-wrapper">
          {{- tab.link -}}
        </span>
        {% spaceless %}
          <div{{ tray.attributes }}>
            {% if tray.label %}
              <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
            {% endif %}
            <nav class="toolbar-lining clearfix" role="navigation"{% if tray.label %} aria-label="{{ tray.label }}{% endif %}">
              {{ tray.links }}
            </nav>
          </div>
        {% endspaceless %}
      </div>
    {% endfor %}
  </nav>
  {{ remainder }}
</div>

File

templates/toolbar-themes--toolbar.html.twig
View source
  1. {#
  2. /**
  3. * Toolbar themes implementation for the administrative toolbar.
  4. *
  5. * Available variables:
  6. * - attributes: HTML attributes for the wrapper.
  7. * - toolbar_attributes: HTML attributes to apply to the toolbar.
  8. * - toolbar_heading: The heading or label for the toolbar.
  9. * - tabs: List of tabs for the toolbar.
  10. * - attributes: HTML attributes for the tab container.
  11. * - link: Link or button for the menu tab.
  12. * - icon_attributes: tab icon classes and attributes to style SVG grunticons.
  13. * - trays: Toolbar tray list, each associated with a tab. Each tray in trays
  14. * contains:
  15. * - attributes: HTML attributes to apply to the tray.
  16. * - label: The tray's label.
  17. * - links: The tray menu links.
  18. * - remainder: Any non-tray, non-tab elements left to be rendered.
  19. * - show_icons: bool to show or hide icon markup.
  20. *
  21. * @see toobar_themes_preprocess_toolbar()
  22. *
  23. * @ingroup themeable
  24. */
  25. #}
  26. <div{{ attributes.addClass('toolbar') }}>
  27. {%
  28. set classes = [
  29. 'toolbar-bar',
  30. show_icons ? 'has-icons' : 'no-icons',
  31. show_tabs ? 'has-tabs' : 'no-tabs',
  32. ]
  33. %}
  34. <nav{{ toolbar_attributes.addClass(classes).setAttribute('style', font_size) }}>
  35. <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
  36. {% for key, tab in tabs %}
  37. {% set tray = trays[key] %}
  38. <div{{ tab.attributes.addClass('toolbar-tab') }}>
  39. <span class="toolbar-tab__items-wrapper">
  40. {{- tab.link -}}
  41. </span>
  42. {% spaceless %}
  43. <div{{ tray.attributes }}>
  44. {% if tray.label %}
  45. <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
  46. {% endif %}
  47. <nav class="toolbar-lining clearfix" role="navigation"{% if tray.label %} aria-label="{{ tray.label }}{% endif %}">
  48. {{ tray.links }}
  49. </nav>
  50. </div>
  51. {% endspaceless %}
  52. </div>
  53. {% endfor %}
  54. </nav>
  55. {{ remainder }}
  56. </div>