<nav class="text-sm" style="width:16rem;flex:0 0 16rem;" aria-label="Documentation navigation">
    <ul role="list" class="space-y-6">
        <% for(var i=0; i<nav.length; i++) {%>
        <li>
            <h2 class="font-semibold text-slate-900 text-xs uppercase tracking-wide mb-3">
                <%- nav[i].title -%>
            </h2>
            <ul role="list" class="space-y-1 border-l border-slate-200">
                <% if(nav[i].links.length> 0) { %>
                    <% for(var j=0; j<nav[i].links.length; j++) {%>
                        <% if(link && link.url===nav[i].links[j].url) { %>
                        <li class="relative">
                            <a class="flex items-center py-1.5 pl-4 -ml-px border-l-2 border-indigo-500 text-indigo-600 font-medium bg-indigo-50/50 -mr-3 pr-3 rounded-r-md transition-colors"
                               href="<%- nav[i].links[j].url -%>">
                                <%- nav[i].links[j].title -%>
                            </a>
                        </li>
                        <% } else { %>
                        <li class="relative">
                            <a class="flex items-center py-1.5 pl-4 -ml-px border-l-2 border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300 hover:bg-slate-50/50 -mr-3 pr-3 rounded-r-md transition-colors"
                               href="<%- nav[i].links[j].url -%>">
                                <%- nav[i].links[j].title -%>
                            </a>
                        </li>
                        <% } %>
                    <% } %>
                <% } %>
            </ul>
        </li>
        <% } %>
    </ul>
</nav>