feat: add logo | refactor header

This commit is contained in:
kmacoders 2021-06-27 23:33:38 +07:00
parent f39f57f3fc
commit 546f1d4aad
3 changed files with 42 additions and 15 deletions

BIN
assets/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 628 KiB

View File

@ -1,10 +1,10 @@
<template> <template>
<b-navbar> <b-navbar>
<template #brand> <template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }"> <b-navbar-item tag="nuxt-link" :to="{ path: '/' }">
<img <img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png" src="~assets/images/logo.png"
alt="Lightweight UI components for Vue.js based on Bulma" alt="eHandy logo"
> >
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -13,7 +13,8 @@
<b-navbar-item <b-navbar-item
v-if="nav.subMenu.length === 0" v-if="nav.subMenu.length === 0"
:key="index" :key="index"
:href="nav.link" tag="nuxt-link"
:to="nav.link"
> >
{{ nav.title }} {{ nav.title }}
</b-navbar-item> </b-navbar-item>
@ -25,7 +26,8 @@
<b-navbar-item <b-navbar-item
v-for="(sub, i) in nav.subMenu" v-for="(sub, i) in nav.subMenu"
:key="i" :key="i"
:href="sub.link" tag="nuxt-link"
:to="sub.link"
> >
{{ sub.title }} {{ sub.title }}
</b-navbar-item> </b-navbar-item>
@ -36,12 +38,12 @@
<template #end> <template #end>
<b-navbar-item tag="div"> <b-navbar-item tag="div">
<div class="buttons"> <div class="buttons">
<a class="button is-primary"> <NuxtLink to="/sign-in" class="button is-primary">
<strong>Sign up</strong> Sign up
</a> </NuxtLink>
<a class="button is-light"> <NuxtLink to="/sign-in" class="button is-light">
Log in Log in
</a> </NuxtLink>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>
@ -55,17 +57,42 @@ import { Vue, Component } from 'nuxt-property-decorator'
export default class TheHeader extends Vue { export default class TheHeader extends Vue {
navbarItems = [ navbarItems = [
{ {
title: 'Trang chu', title: 'Trang ch',
link: '/', link: '/',
subMenu: [] subMenu: []
}, },
{ {
title: 'Khoa hoc', title: 'Khóa học',
link: '/', link: '/',
subMenu: [] subMenu: [
{
title: 'HTML5/CSS3',
link: '/'
}, },
{ {
title: 'Ve chung toi', title: 'Javascript',
link: '/'
},
{
title: 'Vue',
link: '/'
},
{
title: 'React',
link: '/'
},
{
title: 'NodeJS',
link: '/'
},
{
title: 'NuxtJS',
link: '/'
}
]
},
{
title: 'eHandy Teams',
link: '/', link: '/',
subMenu: [ subMenu: [
{ {

View File

@ -4,7 +4,7 @@ export default {
// Global page headers: https://go.nuxtjs.dev/config-head // Global page headers: https://go.nuxtjs.dev/config-head
head: { head: {
title: 'dfgdf', title: 'eHandyTech',
meta: [ meta: [
{ charset: 'utf-8' }, { charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' },