4fr

1
{% macro navItem(entry) %}
2
	<li class="my-1">
3
		<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 }}">
4
			{{ entry.title }}
5
		</a>
6
		{% if entry.children %}
7
			<ul class="ml-4 font-normal">
8
				{% for entry in entry.children %}
9
					<li class="my-1">
10
						<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 }}">
11
							{{ entry.title }}
12
						</a>
13
					</li>
14
				{% endfor %}
15
			</ul>
16
		{% endif %}
17
	</li>
18
{% endmacro %}
19

20
<aside class="flex-shrink-0 top-24 md:top-0 md:relative w-full md:w-1/4 max-w-[260px]">
21
	<input id="menu-toggle" type="checkbox" class="menu-state absolute invisible h-0 w-0 md:hidden"/>
22
	<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">
23
		<div class="burger-icon" role="icon">
24
			<div></div>
25
			<div></div>
26
			<div></div>
27
		</div>
28
		Open Menu
29
	</label>
30
	<nav class="hidden md:block mr-10">
31
		{% for entry in nav %}
32
			{% if entry.section %}
33
				<h5 class="uppercase font-semibold text-sm text-gray-400 mb-2">{{ entry.section }}</h5>
34
			{% endif %}
35
			<ul class="mb-8 font-medium">
36
				{% for entry in entry.children %}
37
					{{ navItem(entry) }}
38
				{% endfor %}
39
			</ul>
40
		{% endfor %}
41
	</nav>
42
</aside>
43