<nav aria-labelledby="navigation" x-data="{open: false}">
<a rel="home" href="/">
<svg viewBox="0 0 41 52" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M13.219 6.324h22.126v18.2c-2.616 2.6-5.514 5.833-7.352 7.94-3.464-7.8-9.119-17.005-13.572-24.313l-1.202-1.827Z" fill="currentColor"/><path d="M35.345 27.546V52H0V6.324h10.745c.565.984 1.202 1.968 1.838 2.952 4.665 7.589 10.603 17.216 13.926 25.086-1.485 1.968-3.11 4.849-3.393 8.292-.142 2.038.424 3.865 1.625 5.13.637.773 1.556 1.194 2.545 1.264.99 0 1.909-.421 2.545-1.194 1.131-1.265 1.555-3.373 1.272-5.832-.282-2.109-1.06-4.638-2.12-7.309 1.272-1.686 3.888-4.567 6.362-7.167Z" fill="currentColor"/><path d="M25.166 42.795c.212-2.179.99-4.287 2.19-6.114.708 1.827 1.203 3.725 1.556 5.622.212 1.757-.07 3.373-.777 4.146-.213.28-.566.492-.92.492-.353-.07-.706-.282-.99-.563-.777-.843-1.13-2.178-1.06-3.583ZM39.233 26c.976 0 1.767-.786 1.767-1.757 0-.97-.791-1.756-1.767-1.756-.976 0-1.767.786-1.767 1.756S38.255 26 39.233 26ZM10.604 4.216c1.17 0 2.12-.944 2.12-2.108 0-1.164-.95-2.108-2.12-2.108-1.172 0-2.121.944-2.121 2.108 0 1.164.95 2.108 2.12 2.108Z" fill="currentColor"/></svg>
<span>Inclusive Design Guide</span>
</a>
<button aria-expanded="false" x-bind:aria-expanded="open" @click="open = !open"><svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="close"><path d="M1 13 13 1M1 1l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><svg viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="menu"><path d="M1 1h12M1 5h12M1 9h12" stroke="currentCOlor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="label">menu</span></button>
<div class="inner flow">
<h2 id="navigation">Menu</h2>
<ul role="list">
<li>
<a class="--insights" href="#insights">Insights</a>
</li>
<li>
<a class="--practices" href="#practices">Practices</a>
</li>
<li>
<a class="--techniques" href="#techniques">Techniques</a>
</li>
<li>
<a class="--activities" href="#activities">Activities</a>
</li>
</ul>
</div>
</nav>
{{ c("navigation", {
"items": [
{
"title": "Insights"
},
{
"title": "Practices"
},
{
"title": "Techniques"
},
{
"title": "Activities"
}
]
}) }}