<button aria-label="Toggle main navigation" aria-expanded="false" aria-controls="small-primary-navigation" data-primary-navigation-toggle class="primary-navigation-toggle">
<span class="primary-navigation-toggle__open">
<span class="primary-navigation-toggle__text">
Menu
</span>
<span class="primary-navigation-toggle__icon">
<svg role="none" aria-hidden="true" class="menu" fill="none" height="12" viewBox="0 0 16 12" width="16" xmlns="http://www.w3.org/2000/svg">
<title>menu</title>
<path class="menu__shape" clip-rule="evenodd" d="m15 10c.5523 0 1 .4477 1 1s-.4477 1-1 1h-14c-.552285 0-1-.4477-1-1s.447715-1 1-1zm0-5c.5523 0 1 .44772 1 1s-.4477 1-1 1h-14c-.552285 0-1-.44772-1-1s.447715-1 1-1zm0-5c.5523 0 1 .447715 1 1 0 .55228-.4477 1-1 1h-14c-.552285 0-1-.44772-1-1 0-.552285.447715-1 1-1z" fill="#be75f5" fill-rule="evenodd" />
</svg>
</span>
</span>
<span class="primary-navigation-toggle__close">
<span class="primary-navigation-toggle__text">
Close
</span>
<span class="primary-navigation-toggle__icon">
<svg role="none" aria-hidden="true" class="x" fill="none" height="14" viewBox="0 0 15 14" width="15" xmlns="http://www.w3.org/2000/svg">
<title>close</title>
<g class="x__shape" stroke="#be75f5" stroke-linecap="round" stroke-width="2">
<path d="m1.70703 1 11.99997 12" />
<path d="m13.707 1-11.99997 12" />
</g>
</svg>
</span>
</span>
</button>
<button aria-label="Toggle main navigation"
aria-expanded="false"
aria-controls="small-primary-navigation"
data-primary-navigation-toggle
class="primary-navigation-toggle">
<span class="primary-navigation-toggle__open">
<span class="primary-navigation-toggle__text">
Menu
</span>
<span class="primary-navigation-toggle__icon">
{% include 'bits/icons/menu.twig' %}
</span>
</span>
<span class="primary-navigation-toggle__close">
<span class="primary-navigation-toggle__text">
Close
</span>
<span class="primary-navigation-toggle__icon">
{% include 'bits/icons/x.twig' %}
</span>
</span>
</button>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
}
}
.primary-navigation-toggle {
--buttonBackgroundColor: transparent;
--collapsedTextColor: var(--white);
--expandedTextColor: var(--white);
--iconFillColor: var(--brightPurple);
align-items: center;
cursor: pointer;
display: flex;
position: relative;
height: 100%;
&__close,
&__open {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
&[aria-expanded=false] &__close {
display: none;
}
&[aria-expanded=true] &__open {
display: none;
}
&__text {
@include detail;
color: var(--collapsedTextColor);
flex: 1;
margin-right: 0.63rem;
}
&__icon {
transition: all 0.3s;
margin-bottom: -2px;
width: 1rem;
& .x__shape,
& .menu__shape {
fill: var(--iconFillColor);
}
}
}
No notes defined.