{% macro navItem(entry) %}
	<li class="my-1">
		<a class="py-1 px-2 -mx-2 block rounded text-gray-600 dark:text-gray-300 {% if page.url === '/docs' + entry.href %} bg-brand-100 dark:bg-brand-900 text-brand-600 dark:text-brand-400 hover:text-brand-600{% else %} hover:text-gray-900 dark:hover:text-gray-400{% endif %}" href="/docs{{ entry.href | url }}">
			{{ entry.title }}
		</a>
		{% if entry.children %}
			<ul class="ml-4 font-normal">
				{% for entry in entry.children %}
					<li class="my-1">
						<a class="py-1 px-2 -mx-2 block rounded text-gray-600 dark:text-gray-300 {% if page.url === '/docs' + entry.href %} bg-brand-100 dark:bg-brand-900 text-brand-600 dark:text-brand-400 hover:text-brand-600{% else %} hover:text-gray-900 dark:hover:text-gray-400{% endif %}" href="/docs{{ entry.href | url }}">
							{{ entry.title }}
						</a>
					</li>
				{% endfor %}
			</ul>
		{% endif %}
	</li>
{% endmacro %}

<aside class="flex-shrink-0 top-24 md:top-0 md:relative w-full md:w-1/4 max-w-[260px]">
	<input id="menu-toggle" type="checkbox" class="menu-state absolute invisible h-0 w-0 md:hidden"/>
	<label for="menu-toggle" aria-title="Open Menu" class="flex items-center md:hidden py-2 border-t border-b border-gray-100 dark:border-gray-800 text-gray-500 dark:text-gray-300 mb-8 font-medium">
		<div class="burger-icon" role="icon">
			<div></div>
			<div></div>
			<div></div>
		</div>
		Open Menu
	</label>
	<nav class="hidden md:block mr-10">
		{% for entry in nav %}
			{% if entry.section %}
				<h5 class="uppercase font-semibold text-sm text-gray-400 mb-2">{{ entry.section }}</h5>
			{% endif %}
			<ul class="mb-8 font-medium">
				{% for entry in entry.children %}
					{{ navItem(entry) }}
				{% endfor %}
			</ul>
		{% endfor %}
	</nav>
</aside>
