miracle/components/Header.vue

155 lines
2.9 KiB
Vue
Raw Normal View History

<template>
<div>
2020-06-23 21:37:09 +00:00
<div class="site-header">
<div class="site-header-inner">
<header>
<div class="header-title">
<nuxt-link to="/"><h1 class="text-lg text-white">Damillora</h1></nuxt-link>
</div>
<div class="header-nav">
<div id="menushow" class="">
<span class="h-12 w-12 px-3 py-3 text-white md:hidden material-icons" alt="menu">menu</span>
</div>
<div class="nav-menu">
<NavItem
link="/about"
icon="person"
text="about"
/>
<NavItem
link="/games"
icon="videogame_asset"
text="game profile"
/>
<NavItem
2020-07-06 02:59:24 +00:00
link="/links"
2020-06-23 21:37:09 +00:00
icon="contacts"
2020-07-06 02:59:24 +00:00
text="links"
2020-06-23 21:37:09 +00:00
/>
<NavItem
link="//blog.nanao.moe"
icon="rss_feed"
text="blog"
external="true"
/>
</div>
</div>
</header>
</div>
</div>
</div>
</template>
<script>
2020-06-23 21:37:09 +00:00
import NavItem from './NavItem';
export default {
2020-06-23 21:37:09 +00:00
components: {
NavItem
},
2020-02-01 20:26:13 +00:00
computed: {
title() {
return this.$store.state.title;
}
},
methods: {
goBack(event) {
if(event) event.preventDefault();
this.$router.back();
}
}
}
</script>
<style>
2020-06-23 21:37:09 +00:00
.site-header {
min-height: 300px;
height: 70vh;
background-image: url('~assets/images/bg-sm.jpg');
background-size: cover;
background-position: center;
}
@screen md {
.site-header {
@apply fixed;
height: 100vh;
width: 25vw;
}
}
@screen sm {
.site-header {
background-image: url('~assets/images/bg-md.jpg');
}
}
@screen md {
.site-header {
background-image: url('~assets/images/bg-lg.jpg');
}
}
@screen lg {
.site-header {
background-image: url('~assets/images/bg-xl.jpg');
}
}
@screen xl {
.site-header {
background-image: url('~assets/images/bg-xxl.jpg');
}
}
.site-header-inner {
background: rgba(0,0,0,0.5);
@apply w-full h-full;
}
header {
2020-06-23 21:37:09 +00:00
@apply flex flex-row transition duration-300 ease-in-out;
}
2020-06-23 21:37:09 +00:00
@screen md {
header {
@apply flex flex-col
}
}
header:hover {
@apply bg-yuika-blue-700;
}
.header-title {
@apply flex-grow transition duration-300 ease-in-out;
}
.header-title a {
@apply flex flex-row items-center py-5 pl-4 w-full h-full;
}
.header-title:hover {
@apply bg-yuika-blue-500;
}
.header-nav {
@apply relative;
}
.header-nav #menushow {
@apply cursor-pointer relative px-2 py-2 transition duration-300 ease-in-out;
}
2020-06-23 21:37:09 +00:00
.header-nav #menushow:hover {
@apply bg-yuika-blue-500;
}
2020-06-23 21:37:09 +00:00
.header-nav .nav-menu {
2020-06-23 22:01:03 +00:00
@apply hidden absolute right-0 bg-yuika-blue-700;
2020-06-23 21:37:09 +00:00
width: 100vw;
}
2020-06-23 21:37:09 +00:00
.header-nav:hover .nav-menu {
@apply block;
}
2020-06-23 21:37:09 +00:00
@screen md {
header {
@apply flex flex-col
}
header:hover {
background-color: transparent;
}
.header-nav #menushow {
@apply py-0;
}
.header-nav .nav-menu {
@apply block relative w-full;
2020-06-23 22:01:03 +00:00
background-color: transparent;
2020-06-23 21:37:09 +00:00
}
}
</style>