92 lines
4.1 KiB
Twig
Executable File
92 lines
4.1 KiB
Twig
Executable File
{#
|
|
/**
|
|
* @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>
|