[Vue] 간단한 Side Icon Bar 적용해보기

이전에 생성했던 vue ui 로 만들었던 내용에 덧붙인다.

views 폴더 밑에 SideBar.vue 생성

<template>

<div class="icon-bar">

<router-link to="/"><i class="fa fa-home"></i></router-link>

<router-link to="/about"><i class="fas fa-question"></i></router-link>

</div>

</template>

<style>

.icon-bar {

height: 100%;

width: 90px;

background-color: #555;

position: fixed; /* Fixed Sidebar (stay in place on scroll) */

/*z-index: 1;*/ /* Stay on top */

top: 0; /* Stay at the top */

left: 0;

overflow-x: hidden; /* Disable horizontal scroll */

padding-top: 0;

}

.icon-bar a {

display: block;

text-align: center;

padding: 16px;

transition: all 0.3s ease;

color: white;

font-size: 36px;

}

.icon-bar a:hover {

background-color: #858585;

}

.active {

background-color: #5eaf13;

}

</style>

font-awesome 사용을 위해 index.html에 아래 내용 추가

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

App.vue에 <side-bar></side-bar> 및 <script> 내용 추가

<template>

<div id="app">

<side-bar></side-bar>

<div id="nav">

<router-link to="/">Home</router-link> |

<router-link to="/about">About</router-link>

</div>

<router-view/>

</div>

</template>

<script>

import SideBar from './views/Sidebar.vue'

export default {

name: 'app',

components: {

SideBar

}

}

</script>

결과화면