사이드바에 사용자 지정 링크 섹션을 추가하는 기능

기여 기능
,
15

@Ryan_Hyer 정말 멋지네요! 햄버거 메뉴 토글 이벤트 후 아이템이 나타나거나 계속 나타나게 하는 방법을 찾아내셨네요. 제가 여기서 겪었던 문제가 바로 그것이었어요:

코드가 매우 깔끔하고 정리 잘 되어 있네요. 덕분에 커뮤니티 메뉴에서 원하던 항목이 “더보기” 아래로 숨겨지지 않도록 표시되게 할 수 있었습니다.

헤더:

<script>

const links = [
    // FontAwesome 아이콘이 제대로 나타나지 않는 경우 사이트 설정에 추가해야 할 수 있습니다.
    { 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])
        addCustomLinks()
    }

    function addToggleListener(toggleEl) {
        if (toggleEl) {
            toggleEl.addEventListener("click", function () {
                // 사이드바가 로드될 때까지 잠시 대기합니다.
                setTimeout(function() {
                    let sidebar = document.getElementsByClassName("sidebar-section-header").length
                    if (sidebar) {
                        addCustomLinks()
                    }
                }, 100)
            })
        }
    }
    
    function addCustomLinks() {
        // 네비게이션이 로드될 때까지 잠시 대기합니다.
        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>

그리고 보완할 CSS:

.sidebar-section-content {
  display: flex; /* 순서를 재배열할 수 있도록 flex 레이아웃 설정 */
  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개의 좋아요