mirror of https://github.com/lissy93/dashy
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<header v-if="componentVisible">
|
|
<PageTitle
|
|
v-if="titleVisible"
|
|
:title="pageInfo.title"
|
|
:description="pageInfo.description"
|
|
:logo="pageInfo.logo"
|
|
/>
|
|
<Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
import PageTitle from '@/components/PageStrcture/PageTitle.vue';
|
|
import Nav from '@/components/PageStrcture/Nav.vue';
|
|
import { shouldBeVisible } from '@/utils/SectionHelpers';
|
|
|
|
export default {
|
|
name: 'Header',
|
|
components: {
|
|
PageTitle,
|
|
Nav,
|
|
},
|
|
props: {
|
|
pageInfo: Object,
|
|
},
|
|
computed: {
|
|
componentVisible() {
|
|
return shouldBeVisible(this.$route.name);
|
|
},
|
|
visibleComponents() {
|
|
return this.$store.getters.visibleComponents;
|
|
},
|
|
titleVisible() {
|
|
return this.visibleComponents.pageTitle;
|
|
},
|
|
navVisible() {
|
|
return this.visibleComponents.navigation;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '@/styles/media-queries.scss';
|
|
|
|
header {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: var(--background-darker);
|
|
align-items: center;
|
|
align-content: flex-start;
|
|
@include phone {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
</style>
|