kohvip/eHandyTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add header

Browse Source
This commit is contained in:
kmacoders 2021-06-27 14:52:55 +07:00
parent 0b0bda97c9
commit ef883ffaec
4 changed files with 50 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
components/templates/TheFooter.vue Normal file
View File

45
components/templates/TheHeader.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<b-navbar>
<template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template #start>
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template #end>
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
</template>
<script>
export default {}
</script>

68
layouts/default.vue
View File

@ -1,74 +1,14 @@
<template> <template>
<div> <div>
<nav <the-header />
class="navbar header has-shadow is-primary"
role="navigation"
aria-label="main navigation"
>
<div class="navbar-brand">
<a
class="navbar-item"
href="/"
>
<img
src="~assets/buefy.png"
alt="Buefy"
height="28"
>
</a>
<div class="navbar-burger">
<span />
<span />
<span />
</div>
</div>
</nav>
<section class="main-content columns">
<aside class="column is-2 section">
<p class="menu-label is-hidden-touch">
General
</p>
<ul class="menu-list">
<li
v-for="(item, key) of items"
:key="key"
>
<nuxt-link
:to="item.to"
exact-active-class="is-active"
>
<b-icon :icon="item.icon" /> {{ item.title }}
</nuxt-link>
</li>
</ul>
</aside>
<div class="container column is-10">
<nuxt />
</div>
</section>
</div> </div>
</template> </template>
<script> <script>
import TheHeader from '@/components/templates/TheHeader.vue'
export default { export default {
data () { components: {
return { TheHeader
items: [
{
title: 'Home',
icon: 'home',
to: { name: 'index' }
},
{
title: 'Inspire',
icon: 'lightbulb',
to: { name: 'inspire' }
}
]
}
} }
} }
</script> </script>

44
pages/index.vue
View File

@ -1,53 +1,11 @@
<template> <template>
<section class="section"> <section class="section">
<div class="columns is-mobile">
<card
title="Free"
icon="github"
>
Open source on <a href="https://github.com/buefy/buefy">
GitHub
</a>
</card>
<card
title="Responsive"
icon="cellphone-link"
>
<b class="has-text-grey">
Every
</b> component is responsive
</card>
<card
title="Modern"
icon="alert-decagram"
>
Built with <a href="https://vuejs.org/">
Vue.js
</a> and <a href="http://bulma.io/">
Bulma
</a>
</card>
<card
title="Lightweight"
icon="arrange-bring-to-front"
>
No other internal dependency
</card>
</div>
</section> </section>
</template> </template>
<script> <script>
import Card from '~/components/Card'
export default { export default {
name: 'HomePage', name: 'HomePage'
components: {
Card
}
} }
</script> </script>