diff --git a/source/_patterns/04-components/menu/menu--header/menu--header.twig b/source/_patterns/04-components/menu/menu--header/menu--header.twig index b6243635940c5288d321fbfe5008f54bb1689d90..cbe24fb64ae4e1c765535ac86dbbca3e98cc25fc 100644 --- a/source/_patterns/04-components/menu/menu--header/menu--header.twig +++ b/source/_patterns/04-components/menu/menu--header/menu--header.twig @@ -1,6 +1,63 @@ -<div class="uw-header-menu" aria-label=""> - {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with { - 'items': items, - 'is_demo': true - }%} -</div> +{% set submenu = [] %} + +{% set submenu = submenu|merge + ( + { + 'title': 'Admissions', + 'url': 'https://uwaterloo.ca/admissions/', + 'in_active_trail': false + } + ) +%} + +{% set submenu = submenu|merge + ( + { + 'title': 'About Waterloo', + 'url': 'https://uwaterloo.ca/about/', + 'in_active_trail': false + } + ) +%} + +{% set submenu = submenu|merge + ( + { + 'title': 'Faculties & Academics', + 'url': 'https://uwaterloo.ca/faculties-academics/', + 'in_active_trail': false + } + ) +%} + +{% set submenu = submenu|merge + ( + { + 'title': 'Offices & Services', + 'url': 'https://uwaterloo.ca/offices-services/', + 'in_active_trail': false + } + ) +%} + +{% set submenu = submenu|merge + ( + { + 'title': 'Support Waterloo', + 'url': 'https://uwaterloo.ca/support/', + 'in_active_trail': false + }, + ) +%} +{% set items = [] %} +{% set items = items|merge({'title': 'Jump to', 'url': '#', 'in_active_trail': 'false', 'submenu': submenu}) %} + + + +<div class="uw-header-menu" aria-label=""> + {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with { + 'items': items, + 'is_demo': true + }%} +</div> + diff --git a/source/_patterns/04-components/menu/menu.twig b/source/_patterns/04-components/menu/menu.twig index 3a82b17040d6ba28855c341b2e2332de9d51fde9..7d56a94aba83534114184faa5f9d3a0361ef1614 100644 --- a/source/_patterns/04-components/menu/menu.twig +++ b/source/_patterns/04-components/menu/menu.twig @@ -1,111 +1,120 @@ -{% import _self as menus %} - -{{ menus.menu_links(items, attributes, 0, menu_name, menu_class, item_class, link_class) }} - -{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class) %} - {% import _self as menus %} - {% if items %} - {% if menu_level == 0 %} - {# double quotes around class using menu_name needed for interpolation #} - {% set additional_classes = [ - 'menu', - "menu--#{menu_name}" - ] %} - {% if menu_class %} - {% set additional_classes = additional_classes|merge(menu_class) %} - {% endif %} - {% set additional_attributes = { - 'class': additional_classes - } %} - <ul {{ add_attributes(additional_attributes) }}> - - {% else %} - <ul class="menu menu--subnav"> - {% endif %} - - {% for item in items %} - - {% set item_classes = ['menu--item'] %} - {% set link_classes = ['menu--link'] %} - - {#{% if item.below %}#} - {#{% set item_classes = item_classes|merge(['has-subnav']) %}#} - {#{% set link_classes = link_classes|merge(['has-subnav']) %}#} - {#{% endif %}#} - {% if item.active_trail %} - {% set item_classes = item_classes|merge(['is-active-trail']) %} - {% set link_classes = link_classes|merge(['is-active-trail']) %} - {% endif %} - {% if item.is_collapsed %} - {% set item_classes = item_classes|merge(['is-collapsed']) %} - {% set link_classes = link_classes|merge(['is-collapsed']) %} - {% endif %} - {% if item.is_expanded %} - {% set item_classes = item_classes|merge(['is-expanded']) %} - {% set link_classes = link_classes|merge(['is-expanded']) %} - {% endif %} - {% if item['original_link'].options.attributes.class %} - {% set link_classes = link_classes|merge([item['original_link'].options.attributes.class]) %} - {% endif %} - {% if item_class %} - {% set item_classes = item_classes|merge(item_class) %} - {% endif %} - {% if link_class %} - {% set link_classes = link_classes|merge(link_class) %} - {% endif %} - - {% if item.below %} - {% if menu_level == 0 %} - {% set item_classes = item_classes|merge(['has-submenu']) %} - {% elseif menu_level <= 2 %} - {% set item_classes = item_classes|merge(['has-children']) %} - {% endif %} - {% elseif item.submenu %} - {% if menu_level == 0 %} - {% set item_classes = item_classes|merge(['has-submenu']) %} - {% set link_classes = ['menu--link__sub'] %} - {% elseif menu_level <= 2 %} - {% set item_classes = item_classes|merge(['has-children']) %} - {% endif %} - {% endif %} - - {% set additional_item_attributes = { - 'class': item_classes - } %} - - {% set link_attributes = { - 'class': link_classes - } %} - - <li {{ add_attributes(additional_item_attributes) }}> - <a - {% if item.submenu %} - tabindex="0" - aria-haspopup="true" - role="button" - {% else %} - href="{{ item.url }}" - class="menu--link__only" - {% endif %} - {{ add_attributes(link_attributes) }} - > - <span class="link-text"> - {% if item.title %} - {{ item.title }} - {% elseif item.text %} - {{ item.text }} - {% endif %} - </span> - </a> - {% if item.below %} - {{ menus.menu_links(item.below, attributes, menu_level + 1) }} - {% elseif item.submenu %} - {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }} - {% endif %} - </li> - {% endfor %} - - </ul> - - {% endif %} -{% endmacro %} +{% import _self as menus %} + +{{ menus.menu_links(items, attributes, 0, menu_name, menu_class, item_class, link_class) }} + +{% macro menu_links(items, attributes, menu_level, menu_name, menu_class, item_class, link_class, parent) %} + {% import _self as menus %} + {% if items %} + {% if menu_level == 0 %} + {# double quotes around class using menu_name needed for interpolation #} + {% set additional_classes = [ + 'menu', + "menu--#{menu_name}" + ] %} + {% if menu_class %} + {% set additional_classes = additional_classes|merge(menu_class) %} + {% endif %} + {% set additional_attributes = { + 'class': additional_classes + } %} + <ul {{ add_attributes(additional_attributes) }}> + + {% else %} + <ul class="menu menu--subnav"> + {% endif %} + + {% for item in items %} + + {% set item_classes = ['menu--item'] %} + {% set link_classes = ['menu--link'] %} + + {#{% if item.below %}#} + {#{% set item_classes = item_classes|merge(['has-subnav']) %}#} + {#{% set link_classes = link_classes|merge(['has-subnav']) %}#} + {#{% endif %}#} + {% if item.active_trail %} + {% set item_classes = item_classes|merge(['is-active-trail']) %} + {% set link_classes = link_classes|merge(['is-active-trail']) %} + {% endif %} + {% if item.is_collapsed %} + {% set item_classes = item_classes|merge(['is-collapsed']) %} + {% set link_classes = link_classes|merge(['is-collapsed']) %} + {% endif %} + {% if item.is_expanded %} + {% set item_classes = item_classes|merge(['is-expanded']) %} + {% set link_classes = link_classes|merge(['is-expanded']) %} + {% endif %} + {% if item['original_link'].options.attributes.class %} + {% set link_classes = link_classes|merge([item['original_link'].options.attributes.class]) %} + {% endif %} + {% if item_class %} + {% set item_classes = item_classes|merge(item_class) %} + {% endif %} + {% if link_class %} + {% set link_classes = link_classes|merge(link_class) %} + {% endif %} + + {% if item.below %} + {% if menu_level == 0 %} + {% set item_classes = item_classes|merge(['has-submenu']) %} + {% elseif menu_level <= 2 %} + {% set item_classes = item_classes|merge(['has-children']) %} + {% endif %} + {% elseif item.submenu %} + {% if menu_level == 0 %} + {% set item_classes = item_classes|merge(['has-submenu']) %} + {% set link_classes = ['menu--link__sub'] %} + {% elseif menu_level <= 2 %} + {% set item_classes = item_classes|merge(['has-children']) %} + {% endif %} + {% endif %} + + {% set additional_item_attributes = { + 'class': item_classes + } %} + + {% set link_attributes = { + 'class': link_classes + } %} + + {% if menu_level == 1 and parent %} + Parent + {% endif %} + + <li {{ add_attributes(additional_item_attributes) }}> + <a + {% if item.submenu %} + tabindex="0" + aria-haspopup="true" + role="button" + {% else %} + href="{{ item.url }}" + class="menu--link__only" + {% endif %} + {{ add_attributes(link_attributes) }} + > + <span class="link-text"> + {% if item.title %} + {{ item.title }} + {% elseif item.text %} + {{ item.text }} + {% endif %} + </span> + </a> + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% elseif item.submenu %} + {% if menu_level == 0 %} + {{ menus.menu_links(item.submenu, attributes, menu_level + 1, '', '', '', '', item) }} + {% else %} + {{ menus.menu_links(item.submenu, attributes, menu_level + 1) }} + {% endif %} + {% endif %} + </li> + {% endfor %} + + </ul> + + {% endif %} +{% endmacro %} +