[Spring Boot] 19. 네비게이션 바(Nav bar) 추가하기

네비게이션 바 만들기

네비게이션 바는 모든 페이지에서 공통으로 보여야 한다.

/templates/layout.html

...
<!-- 네비게이션 바 -->
<nav 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>
...

SBB를 클릭하면 메인 화면으로 이동한다.
추후 로그인 기능 추가를 위해 로그인 버튼도 생성해놓았다.
화면 크기에 따라 나타나는 햄버거 메뉴 버튼도 추가했다.

화면 크기가 작을 때 '로그인' 메뉴가 사라지고 오른쪽에 버튼 생성.

화면 크기가 클 때 로그인 메뉴가 나타나고 오른쪽 버튼이 사라짐.

 

네비게이션 바의 숨은 기능 알기

부트스트랩은 위와 같이 브라우저의 크기가 작아지면 자동으로 내비게이션 바에 있는 링크들을 햄버거 메뉴 버튼으로 숨긴다.
이를 반응협 웹 이라고 한다.
하지만 현재 이 버튼을 클릭하면 아무 반응이 일어나지 않는데 이를 활용하기 위해서는 부트스트랩 자바스크립트 파일(bootstrap.min.js)을 static 디렉터리로 복사해야 한다.

 

bootstrap.min.js 파일 복사

 

이제 추가한 자바스크립트 파일을 사용할 수 있도록 태그를 추가하자

/templates/layout.html

...
<!-- Bootstrap JS -->
<script th:src="@{/bootstrap.min.js}"></script>
...

햄버거 버튼을 클릭 시 숨어 있는 링크가 나타나는 것을 볼 수 있다.

 

네비게이션 바 분리하기

이전에 우리는 오류 메시지를 표시하는 부분을 공통 템플릿으로 분리하였다.

이번에 네비게이션 바도 공통 템플릿으로 분리하여 활용해보자.

 

/templates/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>

nav태그의 th:fragment 속성을 이용하여 그 부분만 코드를 수정하면 된다.

 

/templates/layout.html

이전에 네비게이션 바 코드가 있던 부분을 모두 제거하고 아래처럼 수정해보자.

....
<!--네비게이션 바 -->
<nav th:replace="~{navbar :: navbarFragment}"></nav>
...

 

 

이렇게 분리하면 중복해서 사용하지는 안허달도 독립된 하나의 템플릿으로 관리하는 것이 유지보수에 좋다.