Main Navigation¶
The main_navigation is used to render a main menu.
Configuration parameters¶
TODO tu sa tylko opcje konfiguracji pokaż: mobile, tablet, desktop... a nazwy nie sa jeszcze ustalone
Module source code¶
{% from "@macros/menu_content.twig" import menu_content %}
{% from "@macros/menu_close_action_button.twig" import menu_close_action_button %}
{% from "@macros/menu_toggle_action_button.twig" import menu_toggle_action_button %}
{% from "@macros/menu_go_back_action_button.twig" import menu_go_back_action_button %}
{% from "@macros/menu_content_info.twig" import menu_content_info %}
{% from "@macros/menu_link.twig" import menu_link %}
{% from "@macros/icon.twig" import icon %}
{% set headerLinks = ObjectApi.getHeaderLinks() %}
{% set headerLinksCount = headerLinks.count %}
{% set classListShowOnlyOnMobile = "hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only" %}
{{ headerLinks.setItemCountPerPage(headerLinks.count) }}
<s-menu on-interaction class="menu">
<nav class="menu__navigation" aria-label="Main menu">
<div
hidden
class="js__menu-mobile-action-buttons menu__mobile-action-buttons">
{{ menu_go_back_action_button({
shortDescription: true
}) }}
{{ menu_close_action_button() }}
</div>
<s-menu-content
contentId="root"
class="menu__content menu__content_root menu-content menu-content_root js__list-to-aggregate"
contentLevel="0">
<ul class="js__menu-bar-list menu__list menu__list_root">
{% for headerLink in headerLinks %}
{% set categoryHash = random() %}
{% if headerLink.isCategoryLink %}
<li
class="js__menu-list-item menu__list-item menu__list-item_category menu__list-item_category_level-1"
>
{% if headerLink.category.isParent %}
{{ menu_toggle_action_button({
toggleId: "sub-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
classList: "menu__list-link menu__list-link_toggle",
level: 1,
name: "#{headerLink.category.name}",
url: headerLink.url
}) }}
<s-menu-content
hidden
contentLevel="1"
parentContentName="{{ headerLink.category.name }}"
parentContentUrl="{{ headerLink.category.url }}"
parentContentId="root"
class="menu__content menu__content_level-1 menu-content menu-content_level-1"
contentId="sub-category-{{ headerLinks.page }}-{{ loop.index }}-{{ categoryHash }}"
>
<div class="menu-content__container">
<div class="menu__level menu__level_2">
{{ menu_content_info({
activeContentNameClassList: classListShowOnlyOnMobile,
activeContentLinkClassList: classListShowOnlyOnMobile,
currentContent: {
classList: 'hidden-xs-only mb-xs-1',
url: headerLink.category.url,
title: headerLink.title
}
}) }}
<ul class="js__sub-menu-list menu__submenu-list menu__submenu-list_level-2">
{% for category in headerLink.category.subCategories %}
<li class="js__menu-list-item menu__submenu-list-item">
{% if not category.isParent %}
{{ menu_link({
link: {
title: category.name,
url: category.url
},
classList: 'menu__submenu-list-link menu__submenu-list-link_level-2'
}) }}
{% else %}
{{ menu_toggle_action_button({
toggleId: "sub-category-#{category.id}-#{categoryHash}",
classList: "menu-action-button_icon-spread menu__submenu-list-link menu__submenu-list-link_toggle menu__submenu-list-link_level-2",
level: 2,
icon: {
orientation: "right"
},
name: "#{category.name}",
url: category.url
}) }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div
hidden
class="js__menu-level-rest menu__level menu__level_rest">
<div class="js__menu-level-header menu__level-header">
{{ menu_go_back_action_button({
actionButtonId: "sub-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
classList: 'hidden-xs-only'
}) }}
{{ menu_content_info() }}
</div>
{{
menu_content(headerLink.category.subCategories, {
parentCategoryId: "sub-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
togglerPrefix: 'sub-category',
categoryHash: categoryHash,
level: 3
})
}}
</div>
</div>
{{ menu_close_action_button({
classList: ['hidden-xs-only']
}) }}
</s-menu-content>
{% else %}
{{ menu_link({
link: {
title: headerLink.category.name,
url: headerLink.category.url
},
classList: 'menu__list-link'
}) }}
{% endif %}
</li>
{% elseif headerLink.isAllCategoriesLink %}
<li
class="js__menu-list-item menu__list-item menu__list-item_level-1 menu__list-item_category"
>
{{ menu_toggle_action_button({
toggleId: "all-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
classList: "menu__list-link menu__list-link_toggle",
level: 1,
name: "#{headerLink.title}",
url: headerLink.url
}) }}
<s-menu-content
hidden
contentLevel="1"
parentContentName="{{ headerLink.title }}"
parentContentId="root"
class="menu__content menu__content_level-1 menu-content menu-content_level-1"
contentId="all-category-{{ headerLinks.page }}-{{ loop.index }}-{{ categoryHash }}">
<div class="menu-content__container">
<div class="menu__level menu__level_2">
{{ menu_content_info({
activeContentNameClassList: classListShowOnlyOnMobile,
activeContentLinkClassList: classListShowOnlyOnMobile
}) }}
<ul class="js__sub-menu-list menu__submenu-list menu__submenu-list_level-2">
{% for category in headerLink.categories %}
<li class="js__menu-list-item menu__submenu-list-item">
{% if not category.isParent %}
{{ menu_link({
link: {
title: category.name,
url: category.url
},
classList: 'menu__submenu-list-link menu__submenu-list-link_level-2'
}) }}
{% else %}
{{ menu_toggle_action_button({
toggleId: "category-#{category.id}-#{categoryHash}",
classList: "menu-action-button_icon-spread menu__submenu-list-link menu__submenu-list-link_toggle menu__submenu-list-link_level-2",
level: 2,
icon: {
orientation: "right"
},
name: "#{category.name}",
url: category.url
}) }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<div
hidden
class="js__menu-level-rest menu__level menu__level_rest">
<div class="js__menu-level-header menu__level-header">
{{ menu_go_back_action_button({
actionButtonId: "all-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
classList: 'hidden-xs-only'
}) }}
{{ menu_content_info() }}
</div>
{{
menu_content(headerLink.categories, {
parentCategoryId: "all-category-#{headerLinks.page}-#{loop.index}-#{categoryHash}",
togglerPrefix: 'category',
categoryHash: categoryHash,
level: 3
})
}}
</div>
</div>
{{ menu_close_action_button({
classList: "hidden-xs-only"
}) }}
</s-menu-content>
</li>
{% elseif headerLink.isAllBlogCategoriesLink %}
<li
class="js__menu-list-item menu__list-item menu__list-item_level-1 menu__list-item_category"
>
{{ menu_toggle_action_button({
toggleId: "blog-category-#{headerLinks.page}-#{loop.index}-parent-root",
classList: "menu__list-link menu__list-link_toggle",
level: 1,
name: "#{headerLink.title}",
url: headerLink.url
}) }}
<s-menu-content
hidden
contentLevel="1"
parentContentName="{{ headerLink.title }}"
parentContentId="root"
class="menu__content menu__content_level-1 menu-content menu-content_level-1"
contentId="blog-category-{{ headerLinks.page }}-{{ loop.index }}-parent-root">
<div class="menu-content__container">
<div class="menu__level menu__level_2">
{{ menu_content_info({
activeContentNameClassList: classListShowOnlyOnMobile,
activeContentLinkClassList: classListShowOnlyOnMobile,
}) }}
<ul class="js__sub-menu-list menu__submenu-list menu__submenu-list_level-2">
{% for category in headerLink.blogCategories %}
<li class="js__menu-list-item menu__submenu-list-item">
{{ menu_link({
link: {
title: category.name,
url: category.url
},
classList: 'menu__submenu-list-link menu__submenu-list-link_level-2'
}) }}
</li>
{% endfor %}
</ul>
</div>
</div>
{{ menu_close_action_button({
classList: "hidden-xs-only"
}) }}
</s-menu-content>
</li>
{% else %}
<li class="js__menu-list-item menu__list-item">
{% set promotionsLinkClass = headerLink.isPromotionsLink ? 'menu__list-link_secondary' : '' %}
{{ menu_link({
link: {
title: headerLink.title,
url: headerLink.url,
isPopup: headerLink.isPopup
},
classList: "menu__list-link #{promotionsLinkClass}"
}) }}
</li>
{% endif %}
{% endfor %}
<li
class="hidden-xs-only js__list-items-aggregator-container js__menu-list-item menu__list-item menu__list-item_category menu__list-item_category_level-1">
<list-items-aggregator
hidden
name="main-nagivation-aggregator"
list-selector=".js__menu-bar-list"
class="list-items-aggregator">
<span
slot="toggler"
class="menu-action-button menu-action-button_toggle menu__list-link">
{{ translate('More') }}
{{ icon('icon-chevron-down', {
classNames: ['menu-action-button__icon', 'menu-action-button__icon_right']
}) }}
</span>
</list-items-aggregator>
</li>
</ul>
</s-menu-content>
</nav>
</s-menu>
Macros reference¶
- menu_content_info
- menu_close_action_button
- menu_go_back_action_button
- menu_link
- menu_toggle_action_button
- menu_content
- icon
Used Object Api methods¶
Used styles¶
Module configuration schema¶
[
{
"state": "unfolded",
"label": "General settings",
"elements": [
{
"type": "infobox",
"name": "infobox",
"options": {
"type": "blank",
"message": "#### Related settings in the admin panel%s- adding, removing and changing the position of [links in the header](%s)",
"placeholderValues": [
"\n",
"\/admin\/configSkins\/links"
]
}
}
]
}
]