내비게이션에 커스텀 링크 추가하기

아래처럼 pulish.js에 코드를 추가하면 됩니다. 딜레이 없이 추가할 경우 모바일 화면에서는 추가되지 않습니다. 딜레이와 반복을 통해 메뉴가 추가될 때 까지 수행하도록 합니다. 메뉴가 추가되면 더 이상 반복하지 않습니다.

var menuAdded = false; // 메뉴 추가 여부를 추적
 
(function addMenuWithDelay() {
    setTimeout(function () {
        var navContainer = document.querySelector('.nav-view .tree-item-children');
        if (navContainer) {
            // 이미 메뉴가 추가된 경우 실행 중지
            if (menuAdded || document.querySelector('#external-links-header')) {
                menuAdded = true; // 상태를 명확히 설정
                return;
            }
 
            // External Links 제목 생성
            var externalLinksHeader = document.createElement('div');
            externalLinksHeader.className = 'tree-item';
            externalLinksHeader.id = 'external-links-header'; // 고유 ID 추가
            externalLinksHeader.innerHTML = `
                <div class="tree-item-self is-clickable" style="pointer-events: none;">
                    <div class="tree-item-inner" style="font-weight: bold; color: var(--text-faint);">
                        External Links
                    </div>
                </div>
            `;
 
            // Linkedin 링크 생성
            var linkedinLink = document.createElement('div');
            linkedinLink.className = 'tree-item';
            linkedinLink.innerHTML = `
                <div class="tree-item-self is-clickable">
                    <div class="tree-item-inner">
                        <a href="https://www.linkedin.com/in/2kwonhee/" target="_blank" rel="noopener noreferrer">
                            💼 LinkedIn
                        </a>
                    </div>
                </div>
            `;
 
            // Github 링크 생성
            var githubLink = document.createElement('div');
            githubLink.className = 'tree-item';
            githubLink.innerHTML = `
                <div class="tree-item-self is-clickable">
                    <div class="tree-item-inner">
                        <a href="https://github.com/idencosmos" target="_blank" rel="noopener noreferrer">
                            💻 Github
                        </a>
                    </div>
                </div>
            `;
 
            // X 링크 생성
            var xLink = document.createElement('div');
            xLink.className = 'tree-item';
            xLink.innerHTML = `
                <div class="tree-item-self is-clickable">
                    <div class="tree-item-inner">
                        <a href="https://x.com/2kwonhee" target="_blank" rel="noopener noreferrer">
                            📝 𝕏
                        </a>
                    </div>
                </div>
            `;
            
            // Spacer(간격) 생성
            var spacer = document.createElement('div');
            spacer.style.cssText = "height: 16px;"; // 메뉴 간격 조정
            
            // External Links 제목과 각 링크를 navContainer에 추가
            navContainer.appendChild(spacer); // 간격 추가
            navContainer.appendChild(externalLinksHeader);
            navContainer.appendChild(linkedinLink);
            navContainer.appendChild(githubLink);
            navContainer.appendChild(xLink);
 
            menuAdded = true; // 메뉴 추가 상태 설정
        } else {
            // 메뉴 컨테이너가 아직 준비되지 않은 경우 100ms 후 다시 시도
            addMenuWithDelay();
        }
    }, 100); // 100ms 딜레이
})();