161 lines
4.2 KiB
Vue
161 lines
4.2 KiB
Vue
<template>
|
|
|
|
<body style="background-color: #f4f4f4;">
|
|
|
|
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
|
|
|
|
<!-- Version pour ordinateur -->
|
|
<v-container style="z-index: 2000; margin-bottom: 1.4%">
|
|
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
|
|
|
|
<v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%;">
|
|
<v-text-field append-inner-icon="mdi-magnify" density="compact"
|
|
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
|
|
single-line></v-text-field>
|
|
</v-card-text>
|
|
|
|
<v-col cols="auto" class="d-flex align-center">
|
|
<router-link :to="{ name: 'yourprofile' }">
|
|
<v-row class="d-flex align-center">
|
|
<img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
|
|
alt="Logo">
|
|
<h1 class="mb-0 text-h5">ANONYME</h1>
|
|
</v-row>
|
|
</router-link>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-container>
|
|
|
|
|
|
</v-card>
|
|
|
|
<!-- Version pour mobile -->
|
|
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
|
|
<v-app-bar app>
|
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
|
<v-row>
|
|
<v-col cols="11" class="d-flex align-center justify-center">
|
|
<img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
|
|
</v-col>
|
|
|
|
</v-row>
|
|
</v-app-bar>
|
|
<v-navigation-drawer v-model="drawer" temporary>
|
|
<v-list>
|
|
<v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
|
|
<template v-slot:prepend>
|
|
<img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
|
|
</template>
|
|
|
|
</v-list-item>
|
|
</v-list>
|
|
<v-divider></v-divider>
|
|
<v-list density="compact" nav>
|
|
<h1 class="h1-navigation">Navigation</h1>
|
|
<router-link :to="{ name: 'home' }" class="">
|
|
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
|
|
</router-link>
|
|
<RouterLink :to="{ name: 'contact' }">
|
|
<v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
|
|
</RouterLink>
|
|
<v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
|
|
<v-divider style="margin-top: 20%;"></v-divider>
|
|
<h1 class="h1-navigation">Outils</h1>
|
|
<v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
|
|
<v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
|
|
value="logout"></v-list-item>
|
|
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</v-card>
|
|
|
|
|
|
<main class="px-8 py-3 ">
|
|
<router-view />
|
|
</main>
|
|
|
|
</body>
|
|
</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>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
|
|
|
|
|
|
data() {
|
|
return {
|
|
imageSrc: '../../../images/guillaimeaime3x.png',
|
|
drawer: false,
|
|
items: [
|
|
{ title: 'Item 1' },
|
|
{ title: 'Item 2' },
|
|
{ title: 'Item 3' },
|
|
],
|
|
};
|
|
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.mini-profile-picture {
|
|
border-radius: 100px;
|
|
}
|
|
|
|
.mobile-profile-picture {
|
|
height: 40px;
|
|
border-radius: px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
|
/* Ajouter une ombre à la photo */
|
|
border: 2px solid #a30e79;
|
|
margin-right: 10px
|
|
}
|
|
|
|
.header-banner {
|
|
border-top: 5px solid rgba(107, 0, 101, 1);
|
|
margin-top: 15%;
|
|
|
|
}
|
|
|
|
.social-container {
|
|
background-color: #006d77;
|
|
margin-top: -20%;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
|
|
.social-container2 {
|
|
background-color: #0baab2;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
color: white;
|
|
min-width: 400px;
|
|
|
|
}
|
|
|
|
|
|
.mobile-header {
|
|
height: 50px;
|
|
|
|
}
|
|
</style> |