mahee-auffret/components/Header.vue

172 lines
5.2 KiB
Vue
Raw Normal View History

2024-02-21 00:30:14 +01:00
<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>
2024-02-27 18:40:22 +01:00
<NuxtLink to="/galerie">galerie</NuxtLink>
2024-02-21 00:30:14 +01:00
</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;
2024-02-21 00:30:14 +01:00
},
}
}
2024-02-21 00:30:14 +01:00
</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;
> .hover_el_active {
top: -100% !important;
left: -40% !important;
width: 170% !important;
height: 300% !important;
}
2024-02-21 00:30:14 +01:00
> a {
position: relative;
padding: 10px;
padding-left: 0;
z-index: 1;
}
}
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: -75%;
left: -25%;
width: 150%;
height: 250%;
2024-02-21 00:30:14 +01:00
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-2.png');
2024-02-21 00:30:14 +01:00
}
#galeryActive {
background-image: url('/assets/images/hover-galery-2.png');
2024-02-21 00:30:14 +01:00
}
#shopActive {
background-image: url('/assets/images/hover-shop-2.png');
2024-02-21 00:30:14 +01:00
}
#contactActive {
background-image: url('/assets/images/hover-contact-2.png');
2024-02-21 00:30:14 +01:00
}
}
> div {
width: 2rem;
2024-02-21 00:30:14 +01:00
z-index: 1;
img {
2024-04-16 14:19:14 +02:00
padding-top: 10px;
2024-02-21 00:30:14 +01:00
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;
> .hover_el_active {
top: -130% !important;
height: 350% !important;
}
2024-02-21 00:30:14 +01:00
}
ul {
margin-top: 0;
> li:first-of-type {
margin-left: 2.5rem;
}
}
}
> div {
width: 3rem;
> a > img {
padding: 10px;
}
2024-04-16 14:19:14 +02:00
}
2024-02-21 00:30:14 +01:00
}
}
</style>