let headers;
let sidebarLinks;

$(document).ready(function () {
    headers = $(".mind-post_content h2, .mind-post_content h3").toArray();
    const sidebar = $("#mind-post_sidebar-left");

    for (let i = 0; i < headers.length; i++) {
        const currentHeader = headers[i];
        const headerText = $(currentHeader).text();
        const headerId = $(currentHeader).attr("id");
        const headerType = $(currentHeader).prop("nodeName").toLowerCase();

        // <h2> <a href="header-linke"> Header Name </a> </h2>
        const newLine = "<" + headerType + "> <a href=\"#" + headerId + "\">" + headerText + "</a> </" + headerType + ">";
        sidebar.append(newLine);
    }

    sidebarLinks = $("#mind-post_sidebar-left a").toArray();
});
$(function () {
    $(window).scroll(function () {
        let bottomScroll = $(window).scrollTop() + ($(window).height() / 2);
        let found = false;

        for (let i = headers.length - 1; i >= 0; i--) {
            const currentHeader = headers[i];
            const currentSidebarLink = sidebarLinks[i];
            $(currentSidebarLink).removeClass("current");

            const headerVPPosition = $(currentHeader).offset().top;

            if (!found && bottomScroll > headerVPPosition) {
                $(currentSidebarLink).addClass("current");
                found = true;
            }
        }
    });
});