|
| 1 | +{%- comment -%} |
| 2 | + Include as: {%- include components/nav.html pages=pages -%} |
| 3 | + Depends on: include.pages. |
| 4 | + Results in: HTML for the navigation panel. |
| 5 | + Includes: |
| 6 | + sorted_pages.html |
| 7 | + Overwrites: |
| 8 | + nav_pages, first_level_pages, second_level_pages, third_level_pages, |
| 9 | + node, children_list, child, grand_children_list, grand_child. |
| 10 | +{%- endcomment -%} |
| 11 | + |
| 12 | +{%- assign nav_pages = include.pages |
| 13 | + | where_exp: "item", "item.title != nil" |
| 14 | + | where_exp: "item", "item.nav_exclude != true" -%} |
| 15 | + |
| 16 | +{%- include sorted_pages.html pages = nav_pages -%} |
| 17 | + |
| 18 | +{%- comment -%} |
| 19 | + It might be more efficient to sort the pages at each level separately. |
| 20 | +{%- endcomment -%} |
| 21 | + |
| 22 | +{%- assign first_level_pages = sorted_pages |
| 23 | + | where_exp: "item", "item.parent == nil" -%} |
| 24 | +{%- assign second_level_pages = sorted_pages |
| 25 | + | where_exp: "item", "item.parent != nil" |
| 26 | + | where_exp: "item", "item.grand_parent == nil" -%} |
| 27 | +{%- assign third_level_pages = sorted_pages |
| 28 | + | where_exp: "item", "item.grand_parent != nil" -%} |
| 29 | + |
| 30 | +<ul class="nav-list"> |
| 31 | +{%- for node in first_level_pages -%} |
| 32 | + <li class="nav-list-item"> |
| 33 | + {%- if node.has_children -%} |
| 34 | + <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="false"> |
| 35 | + <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> |
| 36 | + </button> |
| 37 | + {%- endif -%} |
| 38 | + <a href="{{ node.url | relative_url }}" class="nav-list-link">{{ node.title }}</a> |
| 39 | + {%- if node.has_children -%} |
| 40 | + {%- assign children_list = second_level_pages |
| 41 | + | where: "parent", node.title -%} |
| 42 | + {%- if node.child_nav_order == 'desc' or node.child_nav_order == 'reversed' -%} |
| 43 | + {%- assign children_list = children_list | reverse -%} |
| 44 | + {%- endif -%} |
| 45 | + <ul class="nav-list"> |
| 46 | + {%- for child in children_list -%} |
| 47 | + <li class="nav-list-item"> |
| 48 | + {%- if child.has_children -%} |
| 49 | + <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ child.title }} category" aria-pressed="false"> |
| 50 | + <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> |
| 51 | + </button> |
| 52 | + {%- endif -%} |
| 53 | + <a href="{{ child.url | relative_url }}" class="nav-list-link">{{ child.title }}</a> |
| 54 | + {%- if child.has_children -%} |
| 55 | + {%- assign grand_children_list = third_level_pages |
| 56 | + | where: "parent", child.title |
| 57 | + | where: "grand_parent", node.title -%} |
| 58 | + {%- if child.child_nav_order == 'desc' or child.child_nav_order == 'reversed' -%} |
| 59 | + {%- assign grand_children_list = grand_children_list | reverse -%} |
| 60 | + {%- endif -%} |
| 61 | + <ul class="nav-list"> |
| 62 | + {%- for grand_child in grand_children_list -%} |
| 63 | + <li class="nav-list-item"> |
| 64 | + <a href="{{ grand_child.url | relative_url }}" class="nav-list-link">{{ grand_child.title }}</a> |
| 65 | + </li> |
| 66 | + {%- endfor -%} |
| 67 | + </ul> |
| 68 | + {%- endif -%} |
| 69 | + </li> |
| 70 | + {%- endfor -%} |
| 71 | + </ul> |
| 72 | + {%- endif -%} |
| 73 | + </li> |
| 74 | +{%- endfor -%} |
| 75 | +</ul> |
0 commit comments