mahee-auffret/components/Header.vue

161 lines
4.8 KiB
Vue

<template>
<header>
<nav>
<div>
<h1 :class="{ active: isActive('/') }">
<div class="hover_el_active" id="indexActive" aria-label="selected element"></div>
<NuxtLink to="/">mahée auffret</NuxtLink>
</h1>
</div>
<ul>
<li :class="{ active: isActive('/galerie') }">
<div class="hover_el_active" id="galeryActive" aria-label="selected element"></div>
<NuxtLink to="/galerie">galerie</NuxtLink>
</li>
<li :class="{ active: isActive('/magasin') }">
<div class="hover_el_active" id="shopActive" aria-label="selected element"></div>
<NuxtLink to="/magasin">magasin</NuxtLink>
</li>
<li :class="{ active: isActive('/contact') }">
<div class="hover_el_active" id="contactActive" aria-label="selected element"></div>
<NuxtLink to="/contact">contact</NuxtLink>
</li>
</ul>
</nav>
<div>
<a :href="globalData.instagram_link" target="_blank">
<img src="/assets/images/instagram.png" alt="Logo Instagram Dessiné" />
</a>
</div>
</header>
</template>
<script>
export default {
async setup() {
let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData;
return {
globalData
};
},
methods: {
isActive(path) {
return this.$route.path === path;
},
}
}
</script>
<style lang="scss">
header {
width: 100%;
display: flex;
justify-content: space-between;
nav {
display: flex;
flex-direction: column;
h1 {
display: inline-block;
width: auto;
position: relative;
margin-top: 1rem;
> a {
position: relative;
padding: 10px;
padding-left: 0;
z-index: 1;
}
}
h1 .hover_el_active {
left: -40% !important;
width: 170% !important;
}
h1:hover .hover_el_active,
h1.active .hover_el_active {
opacity: 1;
}
ul {
display: flex;
list-style: none;
padding: 0;
margin-top: 1rem;
> li {
position: relative;
margin-left: 1.5rem;
> a {
position: relative;
padding: 10px;
z-index: 1;
}
}
> li:hover .hover_el_active,
> li.active .hover_el_active {
opacity: 1;
}
> li:first-of-type {
margin-left: 0;
}
}
.hover_el_active {
position: absolute;
top: -70%;
left: -15%;
width: 130%;
height: 240%;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
#indexActive {
background-image: url('/assets/images/hover-index.png');
}
#galeryActive {
background-image: url('/assets/images/hover-index.png');
left: -30%;
width: 160%;
}
#shopActive {
background-image: url('/assets/images/hover-index.png');
}
#contactActive {
background-image: url('/assets/images/hover-index.png');
}
}
> div {
width: 3rem;
z-index: 1;
img {
width: 100%;
transform: rotate(0deg);
transition: transform 0.3s ease-out;
}
img:hover {
transform: rotate(10deg);
}
}
}
@media screen and (min-width: 800px) {
header {
align-items: center;
nav {
flex-direction: row;
h1 {
margin-top: 0;
}
ul {
margin-top: 0;
> li:first-of-type {
margin-left: 2.5rem;
}
}
}
}
}
</style>