---
layout: default
---

{% include nav.html type="home" %}

<div class="pt-16 max-w-7xl mx-auto flex">

    <!-- Sidebar Navigation -->
    <aside class="hidden lg:block w-64 fixed h-[calc(100vh-4rem)] overflow-y-auto sidebar-scroll border-r border-slate-100 bg-[#fffdfd] pt-8 pb-10">
        <div class="px-4 space-y-8">
            {% for section in page.sidebar %}
            <div>
                <h5 class="mb-3 text-sm font-bold text-slate-900 uppercase tracking-wider">{{ section.title }}</h5>
                <ul class="space-y-1">
                    {% for item in section.items %}
                    <li>
                        <a href="{{ item.url }}" class="{% if item.active %}nav-link active{% endif %} block px-3 py-2 text-sm text-slate-600 hover:text-pink-600 rounded-md transition-colors">
                            {{ item.name }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 lg:pl-72 px-4 sm:px-6 lg:px-8 pt-10 pb-24 max-w-4xl">
        {{ content }}
    </main>
</div>

<!-- Prism syntax highlighting for `language-jam` code blocks.
     The jam language definition lives in /assets/js/jam-prism.js;
     keywords/operators mirror tree-sitter-jam's highlights.scm. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="{{ '/assets/js/jam-prism.js' | relative_url }}"></script>
<script>Prism.highlightAll();</script>