Возможность добавить пользовательский раздел ссылок в боковую панель

[Ryan_Hyer]

Вот ещё один пример, который, надеюсь, окажется полезным для кого-то, и который во многом основан на приведённых выше примерах. Этот код не добавляет совершенно новый раздел, а вместо этого добавляет дополнительные ссылки в нижнюю часть панели «Ещё» в разделе «Сообщество» (но перед ссылками «Часто задаваемые вопросы» и «О нас» в подвале). Он поддерживает иконки FontAwesome (при условии, что они добавлены в настройках сайта) и внешние ссылки. Код обрабатывает крайние случаи, когда боковая панель закрывается и снова открывается, и/или раздел «Сообщество» сворачивается и снова разворачивается. Он работает как на настольных компьютерах, так и на мобильных устройствах.

Я едва ли эксперт по JavaScript, поэтому приношу извинения за любой неоптимальный или некорректный код. По крайней мере, на моём сайте он, похоже, работает как задумано.

Просто вставьте этот код во вкладку «Заголовок» компонента темы и при необходимости настройте:

<script>
const links = [
    // Иконки FontAwesome могут потребовать добавления в настройках сайта, если они не отображаются корректно
    { title: "Мой аккаунт", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "Директория пользователей", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Документация", src: "/docs", icon: "book-reader" },
    { title: "Внешний сайт", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // Мы в мобильном режиме
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // Мы в режиме для настольных компьютеров
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // Немного подождите, пока загрузится боковая панель
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addHeaderListener()
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }

    function addHeaderListener() {
        let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
        if (communityHeader) {
            communityHeader.addEventListener("click", function () {
                // Немного подождите, пока раздел развернётся
                setTimeout(function() {
                    let communitySection = document.getElementById("sidebar-section-content-community")
                    if (communitySection) {
                        addMoreListener()
                    }
                }, 100)
            })
        }
    }
    
    function addMoreListener() {
        let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
        if (buttonMore) {
            buttonMore.addEventListener("click", addCustomLinks)
        }
    }
    
    function addCustomLinks() {
        // Немного подождите, пока загрузится навигация
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[0]
            let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
        
            if (parentEl && !linksAlreadyAdded) {
                links.filter(function (link) {
                    let linkDiv = document.createElement("li")
                    let linkTitleTrim = link.title.replace(/\s+/g, '')
                    linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
                    linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                            <span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
                            <span class="sidebar-section-link-content-text"> ${link.title} </span>
                        </a>
                      `
                    parentEl.append(linkDiv)
                    
                    let linkIcon = document.getElementById("link_" + linkTitleTrim)
                    if (linkIcon && link.icon) {
                        linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#${link.icon}"></use>
                            </svg>
                        `
                    }
                })
            }
        }, 100)
    }
})
</script>