2023-06-16 nav js (네비게이션 바)

 

네브바 js

 

메인페이지에 nav 바가 나타나도록 (id값을 넣은면 <div id="navbar"></div>)  구현했다.
밑에 내용을 쓰면 푸터도 id 값으로 코드를 복잡하게 많이 사용 안해도 된다.

 

// 상단 네비바, 푸터 가져오기
document.addEventListener("DOMContentLoaded", function () {

    // 네비바, 푸터를 삽입할 위치
    const navbar = document.querySelector("#navbar");
    const footer = document.querySelector("#footer");

    if (navbar) {
        // base-nav.html 파일을 가져와서 네비게이션바 위치에 삽입
        fetch("/nav.html")
            .then(response => response.text())
            .then(data => {
                navbar.innerHTML = data;
                         console.log("네브바가 삽입되었습니다!");
            });
    }
});

 그리고 네브바안에 로그인, 로그아웃 프로필, 글쓰기 등 나타내도록 js에서 할 수 있다.