[Spring]기능 - 네비게이션 바

네비게이션 바 만들기를 해보자.

 

네비게이션 바는 그냥 네비게이션 같은 역할을 한다.

이런것도 네비게이션 바 일 것이다..

 

바로 만들어보자.

 

내용은 "Spring 시작하기"를 이어서 진행한다.

 

 

1. nav영역 추가

모든 페이지에 공통적으로 추가해야하는 부분이기 때문에 layout.html에 추가한다.

bootstrap을 이용해 꾸며준 navbar영역의 코드를 header 영역 대신에 추가한다.

<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">SBB</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">로그인</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

그러면

이와 같이 네비게이션 바가 생성된다.

하지만, 화면이 줄어들었을 때

 

햄버거 바가 생성된다. 이를 클릭하면 로그인 및 다른 기능들이 나올 수 있도록 해야하는데 JavaScript를 사용한다.

나는 BootStrap JavaScript를 사용했다. head 부분에 아래 코드를 삽입한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>

그러면

이렇게 변한다!

 

 

2. navbar 분리하기

공통 템플릿에 코드 전체를 넣으면 가독성이 떨어진다. 이를 방지하기 위해 navbar.html을 만들어 공통 템플릿으로 사용하자.

 

navbar.html을 만들어 아래 코드를 삽입한다.

<nav th:fragment="navbarFragment" class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">SBB</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">로그인</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

여기서 th:fragment 속성이 또 나왔는데, 이는 전에 설명하였음으로 넘어가겠다.

 

layout.html 코드 수정

<nav th:replace="navbar :: navbarFragment"></nav>

원래 있던 nav영역의 코드들을 지워버린 후 이렇게 간단히 작성한다.

 

th:replace 속성은 해당 영역의 내용을 navbar.html 의 fragment 속성 중 navbarFragment 이름을 가진 영역의 내용들을 그대로 붙여넣겠다 라는 뜻이다.