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

#30 Merge fix + some more image location change

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-21 14:14:40 -04:00
parent 5d37cefec1 722265b5c1
commit 0b5988fd4c
30 changed files with 1393 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/layouts/DefaultLayout.vue
View File

@@ -2,14 +2,15 @@
<body style="background-color: #f4f4f4;">
<!-- Version pour ordinateur -->
<!-- PC Version -->
<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-menu :location="location">
<v-menu>
<template v-slot:activator="{ props }">
<div class="d-flex align-center" v-bind="attrs" v-on="on">
<div class="d-flex align-center">
<!-- Profile picture in the top right corner -->
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
ANONYME
@@ -17,45 +18,46 @@
</div>
</template>
<v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
<!-- Dropdown Menu Profile/Connection -->
<v-list style="padding: 0;">
<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>
<!-- Version pour mobile -->
<!-- Mobile version -->
<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>
<!-- Logo Top bar -->
<img src="/images/mobilemenulogo.png" class="mobile-header" alt="Logo">
</v-col>
</v-row>
</v-app-bar>
<!-- Left-side Menu -->
<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>
<!-- Left-side Button -->
<v-divider></v-divider>
<v-list density="compact" nav>
<h1 class="h1-navigation">Navigation</h1>
@@ -66,72 +68,27 @@
<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 { auth } from '@/stores/auth.js';
import { useRouter } from 'vue-router';
const store = auth();
const router = useRouter();
const logout = () => {
store.logout();
router.push('/login');
}
const user = store.user;
import { ref } from 'vue';
const drawer = ref(false);
</script>
<script>
export default {
data() {
return {
imageSrc: '../../../images/guillaimeaime3x.png',
drawer: false,
items: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
],
};
},
};
</script>
<style scoped>
.full-width-btn {
width: 100%;
text-align: left;
padding-left: 24px;
padding-right: 24px;
z-index: 1001;
}
@@ -150,7 +107,6 @@ export default {
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
}
@@ -178,7 +134,6 @@ export default {
}
.mobile-header {
height: 50px;