jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DefaultLayout- Menu déroulant, effacé déconnexion, modification présentation

Browse Source
This commit is contained in:
PascalMarchesseault
2024-04-14 16:00:08 -04:00
parent 08fefa4d44
commit 9d3228c087
3 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/layouts/DefaultLayout.vue
View File

@@ -3,20 +3,35 @@
<body style="background-color: #f4f4f4;">
<!-- Version pour ordinateur -->
<v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-col cols="auto" class="d-flex align-end justify-end">
<router-link :to="{ name: 'yourprofile' }">
<v-row class="d-flex align-center">
<v-menu :location="location">
<template v-slot:activator="{ props }">
<div class="d-flex align-center" v-bind="attrs" v-on="on">
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
<h1 class="mb-0 text-h5">ANONYME</h1>
</v-row>
</router-link>
</v-col>
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
ANONYME
</v-btn>
</div>
</template>
<v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
<v-list-item>
<router-link :to="{ name: 'yourprofile' }">
<v-btn class="full-width-btn" flat>Mon profile</v-btn>
</router-link>
</v-list-item>
<v-list-item>
<v-btn class="full-width-btn" flat>Déconnexion</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</v-container>
</v-card>
@@ -108,6 +123,18 @@ export default {
</script>
<style scoped>
.full-width-btn {
width: 100%;
text-align: left;
padding-left: 24px;
padding-right: 24px;
z-index: 1001;
}
.mini-profile-picture {
border-radius: 100px;
}

8
src/views/main/CreatorFolio.vue
View File

@@ -210,13 +210,7 @@
</v-list>
</v-col>
<!-- Log-out -->
<v-col cols="12" class="px-0 logout-button">
<v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
<v-icon left class="mr-4">mdi-logout</v-icon>
Déconnexion
</v-btn>
</v-col>
</v-container>
</v-col>

6
src/views/main/YourProfile.vue
View File

@@ -22,7 +22,7 @@
</v-row>
<v-container style="max-width: 800px;" class="d-flex justify-center align-center">
<v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
<v-container>
<v-row>
<v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
@@ -51,6 +51,10 @@
</v-form>
<v-col class="text-right"> <!-- Aligner le contenu à droite -->
<router-link :to="{ name: 'creatorfolio' }" class="">
<v-btn style="margin-right: 20px;">Retour</v-btn>
</router-link>
<v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
<v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
</v-col>