72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
<template>
|
|
<main>
|
|
<header>
|
|
<h1>{{ theme.title }}</h1>
|
|
|
|
<nav>
|
|
<ul v-if="theme.nav">
|
|
<li v-for="(n, i) in theme.nav" :key="i">
|
|
<nuxt-link v-if="n.to" :to="n.to">{{ n.name }}</nuxt-link>
|
|
<a v-else :href="n.href" target="_blank" rel="noopener">
|
|
{{ n.name }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<form @submit.prevent="doSearch">
|
|
<input v-model="q" type="search" placeholder="Search..." />
|
|
<div class="icon">🔎</div>
|
|
</form>
|
|
</nav>
|
|
</header>
|
|
<Nuxt />
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from 'nuxt-property-decorator'
|
|
import { THEME } from '~/assets/global'
|
|
|
|
@Component
|
|
export default class DefaultLayout extends Vue {
|
|
theme = THEME
|
|
q = this.$route.query.q || ''
|
|
|
|
doSearch() {
|
|
let path = this.$route.path
|
|
if (['/blog', '/tag'].includes(path)) {
|
|
path = '/blog'
|
|
}
|
|
|
|
this.$router.push({
|
|
path,
|
|
query: {
|
|
q: this.q,
|
|
},
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
nav ul {
|
|
display: inline-block;
|
|
}
|
|
|
|
form {
|
|
float: right;
|
|
max-width: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
form .icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 5px;
|
|
}
|
|
|
|
input {
|
|
padding-right: 1.5em;
|
|
}
|
|
</style>
|