#25 Cleaning navigation menu in creatorFolio
This commit is contained in:
Dominic Villemure
@@ -112,30 +112,104 @@
|
||||
<v-img src="../../../images/hutopy.png" alt="Description de l'image"
|
||||
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
|
||||
<v-list dense class="main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
|
||||
<v-list-item v-for="item in navigationItems">
|
||||
<router-link :to="item.link">
|
||||
<v-btn text class="d-flex align-start align-center main-background" elevation="0"
|
||||
outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-col>
|
||||
<!-- Tools -->
|
||||
<v-col cols="12" class="px-0">
|
||||
<v-list dense class="d-flex align-start align-center main-background">
|
||||
<v-list-item-group>
|
||||
<router-link v-for="(item, index) in tools" :key="index" :to="item.link">
|
||||
<v-btn text class="btn-custom" elevation="0" outlined="false">
|
||||
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item-group>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
|
||||
outlined="false">
|
||||
<v-icon left class="mr-4">mdi-wallet</v-icon>
|
||||
<p @click="isActive.value = false">Bourse</p>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<!-- Wallet Modale -->
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card style="border-radius: 30px;">
|
||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||||
<v-icon left size="48">mdi-wallet</v-icon>
|
||||
<v-toolbar title="PORTEFEUILLE"
|
||||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
||||
</div>
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="7">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">#T</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
||||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-list-item>
|
||||
</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">
|
||||
@@ -149,96 +223,7 @@
|
||||
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-row style="height: 1400px;"></v-row>
|
||||
|
||||
<!-- Wallet -->
|
||||
<v-row>
|
||||
<v-dialog transition="dialog-top-transition" width="auto">
|
||||
<template v-slot:activator="{ props: activatorProps }">
|
||||
<v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
|
||||
style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
|
||||
<v-icon color="black">mdi-wallet</v-icon>
|
||||
<div @click="isActive.value = false">PORTEFEUILLE</div>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<!-- Wallet Modale -->
|
||||
<template v-slot:default="{ isActive }">
|
||||
<v-card style="border-radius: 30px;">
|
||||
<div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
|
||||
<v-icon left size="48">mdi-wallet</v-icon>
|
||||
<v-toolbar title="PORTEFEUILLE"
|
||||
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
|
||||
</div>
|
||||
<v-card-text class="text-h1 pa-12">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="7">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
|
||||
<h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
|
||||
<p></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn text="Fermer" @click="isActive.value = false"></v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
|
||||
<v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">#T</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate text-center font-weight-bold">$</v-col>
|
||||
<v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
|
||||
<v-col cols="3" class="text-truncate text-center font-weight-bold"
|
||||
style="margin-right: 2%; background-color: #fbccee">Name</v-col>
|
||||
<v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
|
||||
<v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
|
||||
<v-row>
|
||||
<v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
|
||||
<v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
|
||||
class="text-truncate">10$</v-col>
|
||||
<v-col cols="2" class="text-truncate">20-10-2025</v-col>
|
||||
<v-col cols="3" class="text-truncate"
|
||||
style="margin-right: 2%; background-color: #fbccee">Pascal</v-col>
|
||||
<v-col cols="5" class="text-truncate">Good Job</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
</v-col>
|
||||
@@ -491,6 +476,13 @@ let navigationItems = [
|
||||
let tools = [
|
||||
{ icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
|
||||
]
|
||||
|
||||
|
||||
let items = [
|
||||
{icon: "icon", text: "text"},
|
||||
{icon: "icon2", text: "text2"},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user