74 lines
1.3 KiB
Vue
74 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="error-page">
|
||
|
|
<h1 class="heading" v-if="error.statusCode === 404">Page not found!</h1>
|
||
|
|
<h1 class="heading" v-else>An error occurred!</h1>
|
||
|
|
<nav>
|
||
|
|
<ul class="site-nav">
|
||
|
|
<li class="site-nav__item"
|
||
|
|
v-for="item in siteNav"
|
||
|
|
:key="item.to"
|
||
|
|
@click="$emit('closeMenu')"
|
||
|
|
>
|
||
|
|
<nuxt-link :to="item.to" >
|
||
|
|
{{ item.text }}
|
||
|
|
</nuxt-link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
error: {
|
||
|
|
type: Object,
|
||
|
|
default: function () {
|
||
|
|
return {}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
siteNav () {
|
||
|
|
return this.$store.getters['navigation/siteNav']
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.error-page {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
padding: calc(1rem + #{$site-menu__header-height}) 1rem;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
@media (min-width: $bp__layout) {
|
||
|
|
padding: 6rem 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.heading {
|
||
|
|
margin-bottom: 1em;
|
||
|
|
font-size: 2rem;
|
||
|
|
color: $color__accent-danger-700;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-nav {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-nav__item {
|
||
|
|
margin-bottom: .2em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|