Common Component
Header
Header에서 navigation을 사용 할 생각이다.
원래는 Footer에서 하려했지만 계속해서 메뉴들을 추가 할 것이기 때문에 상단에서 사용하는게 좋을 것 같다.
Vuetify를 사용해 간단하게 Header를 구현하자.
// components/common/MiniHeader.vue
<template>
<v-toolbar density="compact" border :elevation="8" theme="dark" with-background fixed app>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<img class="ml-3" :src="require('@/assets/mini_small.png')" height="40" />
<v-toolbar-title class="text-h4">미니 기여어</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-reply</v-icon>
</v-btn>
</v-toolbar>
<v-navigation-drawer v-model="drawer" color="#424242">
<v-list>
<v-list-item class="mb-2" :prepend-avatar="require('@/assets/mini_profile.png')">
<v-list-item-title class="미니기여어"> 미니 기여어 </v-list-item-title>
</v-list-item>
<v-divider></v-divider>
<v-list-item
v-for="(item, index) in menuItems"
:key="index"
:prepend-icon="item.icon"
:to="item.link"
@click="navigate(item)"
:class="[{ 'v-list-item--active': item.link === $route.path }]"
>
<v-list-item-title>
{{ item.title }}
</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data() {
return {
drawer: false,
menuItems: [
{ icon: "mdi-home", link: "/", title: "홈" },
{ icon: "mdi-food", link: "/lunch", title: "뭐 먹 지" },
{ icon: "mdi-coffee", link: "/coffee", title: "커 피 사 줘" },
],
};
},
methods: {
navigate(item) {
this.$router.push(item.link);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/css/common/font.css";
div {
font-family: "UhBeemysen";
}
.v-list-item-title {
font-size: 1.4rem !important;
}
.미니기여어 {
font-size: 1.6rem !important;
}
.v-spacer {
flex-grow: 0 !important;
}
.v-list-item--active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
Vuetify는 tag를 사용하여 수많은 components를 제공한다.
Vuetify 공식문서 : https://vuetifyjs.com/en/getting-started/installation/#installation
생각보다 사용법이 복잡하니 간단한 강의를 통해서 배우는것도 좋을 것 같다.
Vuetify의 태그들은 반응형으로 작동한다.
태블릿, 모바일에선 show hide로 사용되고 데스크탑에선 show로 구현된다.
// ...
<v-list-item
v-for="(item, index) in menuItems"
:key="index"
:prepend-icon="item.icon"
:to="item.link"
@click="navigate(item)"
:class="[{ 'v-list-item--active': item.link === $route.path }]" // route
>
// ...
// 메뉴 data
menuItems: [
{ icon: "mdi-home", link: "/", title: "홈" },
{ icon: "mdi-food", link: "/lunch", title: "뭐 먹 지" },
{ icon: "mdi-coffee", link: "/coffee", title: "커 피 사 줘" },
],
menu들을 data에서 관리해주고 router기능을 통해 url을 변경하며 SPA 방식으로 화면을 구현한다.
// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import MiniHome from "../views/MiniHome";
import MiniLunch from "@/views/MiniLunch";
import MiniCoffee from "@/views/MiniCoffee";
const routes = [
{
path: "/",
name: "home",
component: MiniHome,
},
{
path: "/lunch",
name: "lunch",
component: MiniLunch,
},
{
path: "/coffee",
name: "coffee",
component: MiniCoffee,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
router/index.js에서 routes를 관리하며 보여질 화면을 추가해주면 된다~
Footer
Footer에선 내 저작권과 나의 모든 것을 넣어놨다.
시간나면 들어와주길 바란다.
별거 없기 때문에 넘어가겠다.
// components/common/MiniFooter.vue
<template>
<div>
<a href="https://github.com/SoominYim" title="git_hub" class="sns" target="blank">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.instagram.com/_soo_min_/" title="instagram" class="sns" target="blank">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://www.facebook.com/profile.php?id=100002681110982" title="facebook" class="sns" target="blank"> <i
class="fa-brands fa-facebook"></i>
</a>
<a href="https://s-o-o-min.tistory.com/" title="tistory" class="sns" target="blank"> <i class="fa-solid fa-t"></i></a>
<span>© {{ new Date().getFullYear() }}. S-o-o-Min . All rights reserved.</span>
</div>
</template>
<script>
export default {
name: "BlogFooter",
};
</script>
<style lang="scss" scoped>
div {
height: 40px;
text-align: center;
.sns {
color: #fff;
font-size: 20px;
padding: 0 10px;
&:hover {
color: #888;
}
transition: all 0.5s ease;
}
span {
font-size: 10px;
display: block;
height: 10px;
margin-top: 6px;
color: #fff;
}
}
</style>
common component를 살펴봤다.
home 페이지를 구상중인데 아마 날씨로 할 것 같다.
다음 글에선 home을 만들어 보겠다.
'밥줄 > Vue.js' 카테고리의 다른 글
[Vue.js] Movie-search Project (0) | 2024.03.18 |
---|---|
[Vue.js] Side Project Tools 만들기 (3) (0) | 2024.02.26 |
[Vue.js]Web browser에서 Source maps 숨기기 (0) | 2024.01.31 |
[Vue.js] Side Project Tools 만들기 (1) (1) | 2024.01.23 |
[Vue.js]String Type 줄 바꿈 (0) | 2023.11.27 |