86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template>
|
|
<nav class="navbar">
|
|
<div class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<NuxtLink :key="index" v-for="(item, index) in listPage" :to="item.path" class="navbar-item"
|
|
>{{ item.title }}
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="navbar-end" v-if="!isUser">
|
|
<NuxtLink to="#" class="navbar-item"> Đăng nhập </NuxtLink>
|
|
<NuxtLink to="#" class="navbar-item"> Đăng ký </NuxtLink>
|
|
</div>
|
|
<HeaderUser v-else />
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup>
|
|
import HeaderUser from './HeaderUser.vue';
|
|
|
|
const isUser = ref(false);
|
|
|
|
const listPage = [
|
|
// {
|
|
// path: '/',
|
|
// title: 'Trang chủ',
|
|
// },
|
|
// {
|
|
// path: '/about',
|
|
// title: 'Giới thiệu',
|
|
// },
|
|
{
|
|
path: '#service-pricing',
|
|
title: 'Bảng giá',
|
|
},
|
|
{
|
|
path: '#contact',
|
|
title: 'Liên hệ',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.navbar {
|
|
flex: auto;
|
|
min-height: fit-content;
|
|
|
|
.navbar-menu {
|
|
justify-content: flex-end;
|
|
gap: 30px;
|
|
}
|
|
.navbar-start {
|
|
margin-inline-end: unset;
|
|
flex: auto;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.navbar-end {
|
|
margin-inline-start: unset;
|
|
gap: 10px;
|
|
}
|
|
|
|
.navbar-item {
|
|
border-radius: 24px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
line-height: 16px;
|
|
font-weight: 600;
|
|
}
|
|
.router-link-active {
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
a.navbar-item:focus,
|
|
a.navbar-item:focus-within,
|
|
a.navbar-item:hover,
|
|
.navbar-link:focus,
|
|
.navbar-link:focus-within,
|
|
.navbar-link:hover {
|
|
background-color: var(--color-hover);
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|