Capacidad para agregar una sección personalizada de enlaces en la barra lateral

Característica
,
14

Aquí tienes otro ejemplo que espero sea útil para alguien, basado en gran medida en los ejemplos anteriores. Este código no añade una sección completamente nueva, sino que añade enlaces adicionales al final del panel “Más” en la sección Comunidad (pero antes de los enlaces de FAQ y Acerca de en el pie de página). Soporta iconos de FontAwesome (asumiendo que se añaden en la configuración del sitio) y enlaces externos. Maneja casos extremos donde la barra lateral se cierra y se vuelve a abrir, y/o la sección Comunidad se colapsa y se expande de nuevo. Funciona en escritorio y móvil.

Apenas soy un experto en JavaScript, así que me disculpo por cualquier código malo o no óptimo. En mi sitio, al menos, parece funcionar como se esperaba.

Simplemente coloca este código en la pestaña Encabezado de un componente de tema y personalízalo según sea necesario:

<script>
const links = [
    // Es posible que los iconos de FontAwesome deban añadirse en la configuración del sitio si no aparecen correctamente
    { title: "Mi Cuenta", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
    { title: "Directorio de Usuarios", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
    { title: "Documentos", src: "/docs", icon: "book-reader" },
    { title: "Sitio Externo", src: "https://google.com/", icon: "globe" }
]

$(document).ready(function () {
    if (document.getElementById("toggle-hamburger-menu")) {
        // Estamos en vista móvil
        addToggleListener(document.getElementById("toggle-hamburger-menu"))
    } else {
        // Estamos en vista de escritorio
        addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
        addHeaderListener()
        addMoreListener()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // Espera un poco a que se cargue la barra lateral
                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 () {
                // Espera un poco a que la sección se expanda
                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() {
        // Espera un poco hasta que se cargue la navegación
        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 Me gusta