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

Característica
,
15

@Ryan_Hyer ¡Muy bien! Descubriste la forma de hacer que los elementos aparezcan (o sigan apareciendo) después del evento de alternancia de la hamburguesa, que era el problema que estaba teniendo aquí:

Tu código también es muy ordenado y limpio. Gracias a eso, pude adaptarlo para que muestre lo que quiero en el menú de Comunidad sin que quede oculto bajo “Más”:

Encabezado:

<script>

const links = [
    // Es posible que los iconos de FontAwesome deban agregarse en la configuración del sitio si no aparecen correctamente
    { 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])
        addCustomLinks()
    }

    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) {
                        addCustomLinks()
                    }
                }, 100)
            })
        }
    }
    
    function addCustomLinks() {
        // Espera un poco hasta que se cargue la navegación
        setTimeout(function () {
            const parentEl = document.getElementsByClassName("sidebar-section-content")[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>

Y el CSS complementario:

.sidebar-section-content {
  display: flex; /* Configura un diseño flexible para que puedas reordenar las cosas */
  flex-direction: column;
  .sidebar-more-section-links-details {
    order: +1;
  }
}

.sidebar-wrapper li a.sidebar-section-link-about {
    display: none;
}

.sidebar-wrapper li a.sidebar-section-link-faq {
    display: none;
}

.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-about {
    display: none;
}

.sidebar-more-section-links-details-content-secondary .sidebar-section-link.sidebar-section-link-faq {
    display: none;
}
2 Me gusta