Vue CLI 부트스크랩 5 내비게이션 바 3 - Vue CLI Bootstrap 5 Navbar

이어서 로그인 영역을 내비게이션 바로 이동시키겠습니다.

​

1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다.

<main> 태그 안에 있는 class가 .headmenu인 <div> 태그를 <header> 태그 안에 있는 class가 .navbar-collapse가 <div> 태그 안으로 이동시킵니다. 그리고 <main> 태그 안에 있는 <div> 태그를 삭제합니다.

<main>
	<div class="header">
		<div class="topline">
			<div class="headmenu">
				<div v-if="isLogin">
					{{this.$store.state.loginStore.memberId}}님, 안녕하세요.
					<span @click="Logout()">로그아웃</span>
				</div>
				<div v-else>
					<router-link :to="{ name: 'Login', query: { returnUrl: '/' }}" v-show="isLogin == false">로그인</router-link>
				</div>
			</div>
		</div>
	</div>
	<router-view/>
</main>

 

다음처럼 변경됩니다.

<header>
	<nav class="navbar navbar-expand-sm navbar-light bg-light">
		<div class="container-fluid">
			<router-link to="/" class="navbar-brand">
				<img alt="Vue logo" src="./assets/logo.png" style="height:25px;" />
			</router-link>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navbarContent">
				<ul class="navbar-nav me-auto">
					<li class="nav-item">
						<router-link to="/" class="nav-link">Home</router-link>
					</li>
					<li class="nav-item">
						<router-link to="/about" class="nav-link">About</router-link>
					</li>
					<li class="nav-item">
						<router-link :to="{name: 'BoardList'}" class="nav-link">Board</router-link>
					</li>
					<li class="nav-item">
						<router-link :to="{name: 'Score'}" class="nav-link">Score</router-link>
					</li>
				</ul>
				<div class="headmenu">
					<div v-if="isLogin">
						{{this.$store.state.loginStore.memberId}}님, 안녕하세요.
						<span @click="Logout()">로그아웃</span>
					</div>
					<div v-else>
						<router-link :to="{ name: 'Login', query: { returnUrl: '/' }}" v-show="isLogin == false">로그인</router-link>
					</div>
				</div>
			</div>
		</div>
	</nav>
</header>
<main>
	<router-view/>
</main>

 

2. 이동한 <div> 태그의 class를 .headmenu에서 .navbar-info으로 변경합니다.

<div class="navbar-info">
	<div v-if="isLogin">
		{{this.$store.state.loginStore.memberId}}님, 안녕하세요.
		<span @click="Logout()">로그아웃</span>
	</div>
	<div v-else>
		<router-link :to="{ name: 'Login', query: { returnUrl: '/' }}" v-show="isLogin == false">로그인</router-link>
	</div>
</div>

 

그리고 <style>에 .headmenu는 삭제합니다.

.header { position:relative; }
.header .topline { position:relative; height:30px; margin:0 10px; }
.header .topline .headmenu { position:absolute; right:0; top:4px; }
.header .topline .headmenu a { font-weight:bold; color:#2c3e50; }
.header .topline .headmenu span { font-weight:bold; color:#2c3e50; cursor:pointer; text-decoration:underline; }

 

그리고 <style>에 .navbar-info를 추가합니다.

.navbar-info a { font-weight:bold; color:#2c3e50 !important; text-decoration:none; }
.navbar-info span { font-weight:bold; color:#2c3e50; cursor:pointer; }

 

3. 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다.

npm run serve

 

내비게이션 바로 로그인 영역이 이동된 것을 확인할 수 있습니다.

 

그리고 로그인을 하면 로그인 영역에 환영 메시지와 로그아웃이 나타납니다.

 

모바일 사이즈에서는 다음과 같이 나타납니다.

 

4. 모바일에서 로그인 영역을 메뉴와 구분되게 보이기 위해서 <style>에 Media Query(미디어 쿼리)를 추가합니다. 내비게이션 바인 <nav> 태그의 class가 .navbar-expand-sm 임으로 Media Query(미디어 쿼리)는 화면 가로 크기가 576px보다 작을 때만 처리되게 하고 .navbar-info의 배경색과 여백을 추가합니다.

@media (max-width: 576px) {
  .navbar-info { background-color:#eee; padding:10px 10px; }
}

 

5. 내비게이션 바의 brand(브랜드)에 텍스트를 추가합니다. 로고 이미지에 텍스트가 포함되어 있다면 텍스트를 추가하지 않아도 됩니다.

<router-link to="/" class="navbar-brand">
	<img alt="Vue logo" src="./assets/logo.png" style="height:25px;" />
	Vue.js App
</router-link>

 

로고에 텍스트가 추가되니 좀 더 좋아 보입니다.

 

 

 

Collapse(콜랩스) Event 처리

​

<script>의 mounted() 함수에서 addEventListener() 메서드로 지정한 이벤트를 수신할 때마다 호출될 함수를 설정하면 됩니다. 이벤트 수신을 확인하기 위해 콘솔로 출력되게 하였습니다. 이벤트가 수신될 때 처리하고 싶은 것이 있으시면 추가하면 됩니다.

mounted() {
	// 콘텐츠가 펼치기 전에 호출
	document.querySelector('#navbarContent').addEventListener('show.bs.collapse', function () {
		console.log("show.bs.collapse");
	});
	// 콘텐츠가 펼친 후에 호출
	document.querySelector('#navbarContent').addEventListener('shown.bs.collapse', function () {
		console.log("shown.bs.collapse");
	});
	// 콘텐츠가 접기 전에 호출
	document.querySelector('#navbarContent').addEventListener('hide.bs.collapse', function () {
		console.log("hide.bs.collapse");
	});
	// 콘텐츠가 접고 난 후에 호출
	document.querySelector('#navbarContent').addEventListener('hidden.bs.collapse', function () {
		console.log("hidden.bs.collapse");
	});
}

 

Toggle(토글) 버튼을 클릭하면 내비게이션 바를 가지고 있는 <div> 태그가 노출(펼쳐짐) 되기 전과 후에 콘솔로 이벤트가 수신되는 것을 확인할 수 있습니다. 다시 Toggle(토글) 버튼을 클릭하면 내비게이션 바를 가지고 있는 <div> 태그가 비노출(접혀짐) 되기 전과 후에 콘솔로 이벤트가 수신되는 것을 확인할 수 있습니다.