|
18 | 18 | * - in_active_trail: TRUE if the link is in the active trail. |
19 | 19 | */ |
20 | 20 | #} |
| 21 | +{# |
| 22 | + Bootstrap-based menus won't display menu levels greater than 2 |
| 23 | + so to get multi-columns working with ASU theme, we make certain |
| 24 | + assumptions how the menu is built. |
| 25 | + Top-level menu items with submenus should have the route:<button> |
| 26 | + as their link. Column headings should use the <nolink> route. |
| 27 | + This menu assumes that each heading is its own column. |
| 28 | + Larger menus or ones with multiple headings in a column |
| 29 | + will need to adjust this or use another method. |
| 30 | + See: https://www.phase2technology.com/blog/creating-mega-menu-layout-builder |
| 31 | +#} |
| 32 | +{% set attributes = attributes.addClass('menu') %} |
21 | 33 | {% import _self as menus %} |
22 | 34 |
|
23 | 35 | {# |
24 | 36 | We call a macro which calls itself to render the full tree. |
25 | 37 | @see http://twig.sensiolabs.org/doc/tags/macro.html |
26 | 38 | #} |
27 | | -{{ menus.menu_links(items, is_front, attributes, 0) }} |
| 39 | +{{ menus.menu_links(items, is_front, dropdown, attributes, 0) }} |
28 | 40 |
|
29 | | -{% macro menu_links(items, is_front, attributes, menu_level) %} |
| 41 | +{% macro menu_links(items, is_front, dropdown, attributes, menu_level) %} |
| 42 | + {% set primary_nav_level = 'menu--level-' ~ (menu_level + 1) %} |
30 | 43 | {% import _self as menus %} |
31 | 44 | {% if items %} |
32 | | - {% if is_expanded %} |
33 | | - <div class="nav-item dropdown"> |
34 | | - {% endif %} |
| 45 | + {% set attributes = attributes.removeClass(primary_nav_level) %} |
35 | 46 | {% for item in items %} |
36 | | - {% |
37 | | - set classes = [ |
38 | | - menu_level ? 'dropdown-item' : 'nav-item', |
39 | | - item.is_expanded ? 'menu-item--expanded', |
40 | | - item.is_collapsed ? 'menu-item--collapsed', |
41 | | - item.in_active_trail ? 'active', |
42 | | - item.below ? 'dropdown', |
| 47 | + {% if item.url.isrouted and item.url.routeName == '<nolink>' %} |
| 48 | + {% set menu_item_type = 'nolink' %} |
| 49 | + {# If there's more than one column, end the current one and |
| 50 | + start a new one. #} |
| 51 | + {% if not loop.first %} |
| 52 | + </div> |
| 53 | + <div class="dropdown-col"> |
| 54 | + {% endif %} |
| 55 | + {% elseif item.url.isrouted and item.url.routeName == '<button>' %} |
| 56 | + {% set menu_item_type = 'button' %} |
| 57 | + {% if item.below %} |
| 58 | + <div class="nav-item dropdown"> |
| 59 | + {% endif %} |
| 60 | + {% else %} |
| 61 | + {% set menu_item_type = 'link' %} |
| 62 | + {% endif %} |
| 63 | + {% set link_classes = [ |
| 64 | + 'menu__link--level-' ~ (menu_level + 1), |
| 65 | + item.in_active_trail ? 'menu__link--active-trail', |
| 66 | + dropdown == 'yes' ? 'dropdown-item' : 'nav-link', |
| 67 | + item.is_active ? 'active', |
43 | 68 | ] |
44 | 69 | %} |
45 | | - |
46 | | - {% |
47 | | - set link_classes = [ |
48 | | - not menu_level ? 'nav-link', |
49 | | - item.in_active_trail ? 'active', |
50 | | - item.below ? 'dropdown-toggle', |
51 | | - item.url.getOption('attributes').class ? item.url.getOption('attributes').class | join(' '), |
52 | | - 'nav-link-' ~ item.url.toString() | clean_class, |
53 | | - ] |
54 | | - %} |
55 | | - {# Change out the home link for an icon #} |
56 | | - {% if item.title == 'Home' %} |
57 | | - {% |
58 | | - set home_classes = [ |
| 70 | + {# |
| 71 | + A unique ID should be used but not available through Twig so use the |
| 72 | + |clean_id filter |
| 73 | + #} |
| 74 | + {% set aria_id = (item.title ~ '-submenu-' ~ loop.index)|clean_id %} |
| 75 | + {% if menu_item_type == 'link' %} |
| 76 | + {# Change out any home link for an icon #} |
| 77 | + {% if ('Home' in item.title) or ('home' in item.title) %} |
| 78 | + {% |
| 79 | + set home_classes = [ |
59 | 80 | 'nav-link-home', |
60 | 81 | 'nav-link', |
| 82 | + is_front ? 'active', |
61 | 83 | ] |
62 | | - %} |
63 | | - {% if is_front %} |
64 | | - <a{{ item.attributes.addClass(home_classes).addClass('active') }} href="{{ item.url }}"> |
| 84 | + %} |
| 85 | + <a{{ item.attributes.addClass(home_classes) }} href="{{ item.url }}" tabindex="0"> |
| 86 | + <span class="d-xl-none">{{ item.title }}</span> |
| 87 | + <span title="{{ item.title }}" class="fas fa-fw fa-home"></span> |
| 88 | + </a> |
65 | 89 | {% else %} |
66 | | - <a{{ item.attributes.addClass(home_classes) }} href="{{ item.url }}"> |
| 90 | + {{ link(item.title, item.url, { 'class': link_classes, 'id': aria_id, 'tabindex': '0'}) }} |
| 91 | + {% endif %} |
| 92 | + {% elseif menu_item_type == 'nolink' %} |
| 93 | + <h3>{{ item.title }}</h3> |
| 94 | + {% elseif menu_item_type == 'button' %} |
| 95 | + <button class="btn dropdown-toggle nav-link" id="{{ aria_id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
| 96 | + {{ item.title }} |
| 97 | + <svg class="svg-inline--fa fa-chevron-down fa-w-14" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg> |
| 98 | + <!--<span class="fa fa-chevron-down"></span>--> |
| 99 | + </button> |
| 100 | + {% set attributes = attributes.setAttributes('id', aria_id) %} |
| 101 | + {% if item.below %} |
| 102 | + {% set dropdown = 'yes' %} |
| 103 | + <div class="dropdown-menu dropdown-columns" aria-labelledby="{{ aria_id }}"> |
| 104 | + {# Always at least one column in the dropdown #} |
| 105 | + <div class="dropdown-col"> |
| 106 | + {{ menus.menu_links(item.below, is_front, dropdown, attributes, menu_level + 1) }} |
| 107 | + </div> {# End the last column in the dropdown #} |
| 108 | + </div> |
67 | 109 | {% endif %} |
68 | | - <span class="d-xl-none">Home</span> |
69 | | - <span title="Home" class="fas fa-fw fa-home"></span> |
70 | | - </a> |
71 | | - {% elseif item.below %} |
72 | | - {{ link(item.title, item.url, {'class': link_classes, 'data-toggle': 'dropdown', 'aria-expanded': 'false', 'aria-haspopup': 'true' }) }} |
73 | | - {{ menus.menu_links(item.below, attributes, menu_level + 1) }} |
74 | | - {% else %} |
75 | | - {{ link(item.title, item.url, {'class': link_classes}) }} |
76 | 110 | {% endif %} |
77 | | - |
| 111 | + {% if (item.below and item.url.routename == '<button>') %} |
| 112 | + </div> |
| 113 | + {% endif %} |
78 | 114 | {% endfor %} |
79 | | - {% if is_expanded %} |
80 | | - </div> |
81 | | - {% endif %} |
82 | 115 | {% endif %} |
83 | 116 | {% endmacro %} |
0 commit comments