forked from 18F/uswds-jekyll
/
header.html
89 lines (83 loc) · 3.31 KB
/
header.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{% if header %}
<header class="usa-header usa-header-{{ header.type | default: 'extended' }}" role="banner">
{% include banner.html %}
{% if header %}
<div class="usa-navbar">
<button class="usa-menu-btn">Menu</button>
<div class="usa-logo" id="logo">
<em class="usa-logo-text">
<a href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}" title="Home">
{{ header.title | default: site.title }}
</a>
</em>
</div>
</div>
<nav role="navigation" class="usa-nav">
<div class="usa-nav-inner">
<button class="usa-nav-close">
<img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close">
</button>
{% assign _primary = header.primary.links %}
{% assign primary_links = site.data.navigation[_primary] | default: _primary %}
{% if primary_links %}
<ul class="usa-nav-primary usa-accordion">
{% for _section in primary_links %}
<li>
{% if _section.links %}
{% assign section_links = site.data.navigation[_section.links] | default: _section.links %}
{% assign _section_id = _section.id %}
{% unless _section_id %}{% assign _section_id = 'nav-' | append: forloop.index %}{% endunless %}
<button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="{{ _section_id }}">
<span>{{ _section.text }}</span>
</button>
<ul id="{{ _section_id }}" class="usa-nav-submenu">
{% for _link in section_links %}
<li>
<a href="{{ _link.href | relative_url }}">{{ _link.text }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{{ _section.href | relative_url }}">
<span>{{ _section.text }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% assign _secondary = header.secondary %}
{% if _secondary %}
<div class="usa-nav-secondary">
{% if _secondary.search %}
<form action="{{ _secondary.search.action | relative_url }}" class="usa-search usa-search-small js-search-form">
<div role="search">
<label class="usa-sr-only" for="search-field-small">Search small</label>
<input id="search-field-small" type="search" name="{{ _secondary.search.query | default: 'search' }}">
<button type="submit">
<span class="usa-sr-only">Search</span>
</button>
</div>
</form>
{% endif %}
<ul class="usa-unstyled-list usa-nav-secondary-links">
{% if _secondary.search %}
<li class="js-search-button-container">
<button class="usa-header-search-button js-search-button">Search</button>
</li>
{% endif %}
{% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
{% for _link in secondary_links %}
<li>
<a href="{{ _link.href | relative_url }}">{{ _link.text }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</nav>
{% endif %}
</header>
<div class="usa-overlay"></div>
{% endif %}