65 lines
1.1 KiB
Vue
65 lines
1.1 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
|
|
type="search"
|
|
:value="$route.query.q"
|
|
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
|
|
|
|
doSearch() {
|
|
alert('not implemented')
|
|
}
|
|
}
|
|
</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>
|