Capacidade de adicionar uma seção personalizada de links à barra lateral

Funcionalidade
,
14

Aqui está outro exemplo que espero que seja útil para alguém, baseado fortemente nos exemplos acima. Este código não adiciona uma seção totalmente nova, mas adiciona links adicionais à parte inferior do painel “Mais” na seção Comunidade (mas antes dos links FAQ e Sobre no rodapé). Ele suporta ícones FontAwesome (assumindo que eles são adicionados nas configurações do site) e links externos. Ele lida com casos extremos onde a barra lateral é fechada e reaberta, e/ou a seção Comunidade é recolhida e expandida novamente. Funciona em desktop e mobile.

Eu não sou um especialista em JavaScript, então peço desculpas por qualquer código ruim ou não otimizado. No meu site, pelo menos, parece funcionar como pretendido.

Basta colocar este código na aba Header de um componente de tema e personalizar conforme necessário:

<script>
const links = [
    // Ícones FontAwesome podem precisar ser adicionados nas configurações do site se não aparecerem corretamente
    { title: "Minha Conta", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "Diretório de Usuários", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Docs", src: "/docs", icon: "book-reader" },
    { title: "Site Externo", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // Estamos em visualização mobile
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // Estamos em visualização desktop
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // Espere um pouco para a barra lateral carregar
                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 () {
                // Espere um pouco para a seção expandir
                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() {
        // Espere um pouco até a navegação ter sido carregada
        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>
4 curtidas