129 lines
4.2 KiB
Vue
129 lines
4.2 KiB
Vue
<template>
|
|
<nav class="py-4 px-8 border-b border-gray-200 bg-custom">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex items-center justify-between">
|
|
<div class="menu-left flex items-center">
|
|
<router-link :to="{ name: 'home' }">
|
|
<img src="/images/Chevron.png" class="img-small mr-2 logo" alt="Logo">
|
|
</router-link>
|
|
<router-link :to="{ name: 'home' }">
|
|
<h1 class="textLogo">HUTOPIA</h1>
|
|
|
|
</router-link>
|
|
|
|
</div>
|
|
<div class="menu-center flex space-x-12">
|
|
<router-link :to="{ name: 'home' }" class="text-green-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
|
</svg>
|
|
</router-link>
|
|
<router-link :to="{ name: 'contact' }" class="text-green-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
|
|
</svg>
|
|
</router-link>
|
|
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-8 h-8 text-custom">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
|
</svg>
|
|
</router-link>
|
|
</div>
|
|
<div v-if="user">
|
|
Hello, {{ user.email }}
|
|
</div>
|
|
<div class="menu-right">
|
|
<router-link :to="{ name: 'yourprofile' }">
|
|
|
|
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small" alt="Logo">
|
|
</router-link>
|
|
</div>
|
|
<v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="px-8 py-6 bg-gray-100">
|
|
<router-view />
|
|
</main>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAuthStore } from '@/plugins/store/authStore';
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const authStore = useAuthStore();
|
|
const router = useRouter()
|
|
|
|
|
|
const logout = () => {
|
|
authStore.logout();
|
|
router.push('/login');
|
|
}
|
|
|
|
const user = authStore.user;
|
|
</script>
|
|
|
|
<style>
|
|
/* CSS pour ajuster la taille de l'image */
|
|
.img-small {
|
|
width: 70px;
|
|
height: 70px;
|
|
}
|
|
|
|
.text-custom {
|
|
color: #000000;
|
|
/* Couleur de texte spécifique */
|
|
}
|
|
|
|
/* CSS pour le texte du menu-left */
|
|
.menu-left a {
|
|
color: #000000;
|
|
/* Couleur du texte */
|
|
font-weight: bold;
|
|
/* Gras */
|
|
text-decoration: none;
|
|
/* Pas de soulignement */
|
|
font-size: 24px;
|
|
/* Taille de la police en pixels */
|
|
}
|
|
|
|
/* CSS pour le texte des liens du menu-center */
|
|
.menu-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* Centrer les éléments horizontalement */
|
|
align-items: center;
|
|
/* Centrer les éléments verticalement */
|
|
flex: 1;
|
|
/* Utiliser tout l'espace disponible */
|
|
}
|
|
|
|
/* CSS pour le texte du menu-right */
|
|
.menu-right a {
|
|
color: #e4e4e4;
|
|
/* Couleur du texte */
|
|
}
|
|
|
|
.bg-custom {
|
|
background-color: #ffffff;
|
|
/* Définissez la couleur de fond souhaitée */
|
|
}
|
|
|
|
.textLogo {
|
|
font-size: 35px;
|
|
/* Taille de la police en pixels */
|
|
}
|
|
|
|
.logo {
|
|
margin-right: 5px;
|
|
/* Réduire la marge entre le logo et le texte */
|
|
|
|
}</style>
|
|
@/plugins/store/authStore |