render/templates/partials/nav.html

<header class="site-header">
    <div class="header-inner">
        <div class="header-search">
            <div
                class="commander"
                onclick="
                    document
                        .getElementById('search-input')
                        .focus()
                "
            >
                <span class="commander-prompt">~</span>
                <input
                    type="text"
                    id="search-input"
                    autocomplete="off"
                    spellcheck="false"
                />
            </div>
            <div
                id="search-results"
                class="search-results"
            ></div>
        </div>
    </div>
</header>

<aside class="sidebar">
    <div class="sidebar-header">
        <a href="/" class="site-title">{{ site.title }}</a>
    </div>

    <button
        class="sidebar-toggle"
        aria-label="Toggle sidebar"
        aria-expanded="false"
    >
        <span></span><span></span><span></span>
    </button>

    <nav class="sidebar-nav" aria-label="Main navigation">
        {% if nav_menu is defined and nav_menu %}
        <ul class="sidebar-menu">
            {% for item in nav_menu %}
            <li class="sidebar-item">
                <a
                    href="{{ item.url }}"
                    {%
                    if
                    item.external
                    %}target="_blank"
                    rel="noopener"
                    {%
                    endif
                    %}
                    {%
                    if
                    item.active
                    %}class="active"
                    {%
                    endif
                    %}
                >
                    {% if item.icon %}<span
                        class="sidebar-icon"
                        >{{ item.icon }}</span
                    >{% endif %}
                    <span class="sidebar-label"
                        >{{ item.label }}</span
                    >
                    {% if item.external %}<span
                        class="external-icon"
                        aria-hidden="true"
                        >&nearr;</span
                    >{% endif %}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}

        <ul class="sidebar-menu sidebar-builtin">
            <li class="sidebar-item">
                <a href="/files"
                    ><span class="sidebar-icon"
                        >&#x1F4D1;</span
                    ><span class="sidebar-label"
                        >Files</span
                    ></a
                >
            </li>
            <li class="sidebar-item">
                <a href="/tags"
                    ><span class="sidebar-icon"
                        >&#x1F3F7;&#xFE0F;</span
                    ><span class="sidebar-label"
                        >Topics</span
                    ></a
                >
            </li>
            {% if graph is defined and graph.enabled %}
            <li class="sidebar-item">
                <a href="/graph"
                    ><span class="sidebar-icon"
                        >&#x1F578;&#xFE0F;</span
                    ><span class="sidebar-label"
                        >Graph</span
                    ></a
                >
            </li>
            {% endif %}
            <li class="sidebar-item">
                <a href="/blog"
                    ><span class="sidebar-icon"
                        >&#x1F4DD;</span
                    ><span class="sidebar-label"
                        >Blog</span
                    ></a
                >
            </li>
        </ul>
    </nav>
</aside>

<script>
    (function () {
        var toggle = document.querySelector(
            ".sidebar-toggle",
        );
        var sidebar = document.querySelector(".sidebar");
        if (toggle && sidebar) {
            toggle.addEventListener("click", function () {
                var expanded =
                    toggle.getAttribute("aria-expanded") ===
                    "true";
                toggle.setAttribute(
                    "aria-expanded",
                    !expanded,
                );
                sidebar.classList.toggle("open");
            });
        }

        var path = window.location.pathname;
        document
            .querySelectorAll(".sidebar-menu a")
            .forEach(function (a) {
                var href = a.getAttribute("href");
                if (
                    href &&
                    href !== "/" &&
                    path.startsWith(href)
                ) {
                    a.classList.add("active");
                }
            });
    })();
</script>