From fc95f5949011a2483e02e2a338d39d4d16245347 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 26 Jul 2024 11:23:24 -0400
Subject: [PATCH] I finished the overhaul of the profile menu. I still need to
 create the modals for each value.

---
 src/views/Account/AccountSecurity.vue  |  55 ++++++++
 src/views/Account/ManageAccount.vue    |  74 +++++++++++
 src/views/Account/PageInformations.vue | 152 +++++++++++++++++++++
 src/views/Account/PersonnalInfo.vue    | 114 ++++++++++++++++
 src/views/main/Header.vue              |   1 +
 src/views/main/Profile.vue             | 176 +++++++++++++++++--------
 6 files changed, 514 insertions(+), 58 deletions(-)
 create mode 100644 src/views/Account/AccountSecurity.vue
 create mode 100644 src/views/Account/ManageAccount.vue
 create mode 100644 src/views/Account/PageInformations.vue
 create mode 100644 src/views/Account/PersonnalInfo.vue

diff --git a/src/views/Account/AccountSecurity.vue b/src/views/Account/AccountSecurity.vue
new file mode 100644
index 0000000..4233e0b
--- /dev/null
+++ b/src/views/Account/AccountSecurity.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-security</v-icon> Sécurité</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comment vous connecter à Hutopy</div>
+
+      <div class="flex flex-col w-full">    
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
+          <span class="flex-auto text-left pr-6">Mot de passe</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Adresse e-mail de récupération</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
+          <span class="flex-auto text-left pr-6">Numéro de téléphone de récupération</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+
+  
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+
diff --git a/src/views/Account/ManageAccount.vue b/src/views/Account/ManageAccount.vue
new file mode 100644
index 0000000..8f4b640
--- /dev/null
+++ b/src/views/Account/ManageAccount.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">  <v-icon class="mr-2 text">mdi-account</v-icon> Gestion des comptes</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comptes</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de la page / utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+          
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="border rounded-2xl w-full max-w-[800px] mt-10">
+      <div class="py-5 uppercase ml-4">Autorisations accordées</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+
diff --git a/src/views/Account/PageInformations.vue b/src/views/Account/PageInformations.vue
new file mode 100644
index 0000000..3b0c5d0
--- /dev/null
+++ b/src/views/Account/PageInformations.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-file-edit-outline</v-icon> Informations de votre page</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
+      <div class="flex flex-col w-full">    
+       
+        <button class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5">
+          <v-icon>mdi-eyedropper-variant</v-icon>
+        </button>
+
+        <button >
+          <img
+              src="/images/hutopymedia/banners/tutorialbanner.png"
+              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+              alt="Tutorial Banner"
+          >
+        </button>
+
+
+        <button class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5">
+          <v-icon>mdi-eyedropper-variant</v-icon>
+        </button>
+
+        <button class="flex justify-center my-5">
+          <img
+              class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
+              src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
+              alt="Profile Image"
+          >
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
+          <span class="flex-none">
+        <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
+          <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
+          <span class="flex-none">
+           <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+        </button>    
+      </div>
+    </div>
+
+    <!-- Réseaux sociaux -->
+    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
+          <span class="flex-auto text-left pr-6">Facebook</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
+          <span class="flex-auto text-left pr-6">Instagram</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png" class="w-5 h-5" ></span>
+          <span class="flex-auto text-left pr-6">X</span>
+          <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
+          <span class="flex-auto text-left pr-6">LinkedIn</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/tiktokblack.png" class="w-5 h-5" ></span>
+          <span class="flex-auto text-left pr-6">TikTok</span>
+          <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
+          <span class="flex-auto text-left pr-6">Youtube</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
+          <span class="flex-auto text-left pr-6">Reddit</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
+          <span class="flex-auto text-left pr-6">Site web personnel</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+        
+        
+      </div>
+    </div>
+  </div>
+
+
+
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+.HoverBtnpicture:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+.custom-border {
+  border: 3px solid #A6147D;
+}
+
+</style>
+
+
diff --git a/src/views/Account/PersonnalInfo.vue b/src/views/Account/PersonnalInfo.vue
new file mode 100644
index 0000000..6fb8dc4
--- /dev/null
+++ b/src/views/Account/PersonnalInfo.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">  <v-icon class="mr-2">mdi-information</v-icon> Informations personnelles</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Information de base</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Photo de profil</span>
+          <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left">Nom</span>
+          <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Anniversaire</span>
+          <span class="flex-auto text-left pr-6">27 octobre 1988</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Genre</span>
+          <span class="flex-auto text-left pr-6">Homme</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Phone & email -->
+  <div class="flex flex-col items-center mt-10 w-full">
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Coordonnées</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Courriel</span>
+          <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="pa-2 min-w-32 text-left">Téléphone</span>
+          <span class="flex-auto text-left pr-6">(581) 999-7540</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Address -->
+  <div class="flex flex-col items-center mt-10 w-full">
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Adresses</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Domicile</span>
+          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="pa-2 min-w-32 text-left">Travail</span>
+          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index 2ad600d..8ebe63c 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -187,4 +187,5 @@ onBeforeUnmount(() => {
   @apply bg-[#903175] text-gray-200;
 }
 
+
 </style>
diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index 6fbe234..b45f623 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -1,88 +1,148 @@
 <template>
-  <div class="px-2">
-    <div class="flex flex-col max-w-2xl mx-auto rounded-3xl shadow-2xl mt-2 mb-16">
+  <div class="flex flex-col md:flex-row">
 
-      <h1 class="text-center text-4xl bg-fuchsia-900 p-3 w-full rounded-t-3xl border-b-4 border-b-gray-200 font-sans text-white">
-        Personnaliser votre profil
-      </h1>
-      
-      <ProfileBanner @updateProfilePicture="updateProfilePicture" @updateBannerPicture="updateBannerPicture" :user="currentUser"></ProfileBanner>
-      <CreatorAboutYou :user="currentUser"></CreatorAboutYou>
-      <SocialLinks :user="currentUser" @updateWebsiteIcon="updateWebsiteIcon"></SocialLinks>
-
-      <div class="sticky inset-x-0 bottom-0 flex justify-center px-4 pb-4">
-        <div class="flex space-x-2">
-          <v-btn class="save-btn" @click="saveForm">Enregistrer</v-btn>
-          <router-link :to="`/${currentUser.userName}`">
-            <v-btn class="save-btn">Retour</v-btn>
-          </router-link>
-          
-        </div>
+    <!-- Left Menu -->
+    <div class="w-full md:max-w-xs">
+     
+      <div class="flex justify-center mt-8 md:mt-0 md:justify-start md:pl-4">
+        <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
       </div>
-
-      <v-snackbar v-model="snackbar" :timeout="1000">
-        Sauvegarde
-
-        <template v-slot:actions>
-          <v-btn color="green" variant="text" @click="snackbar = false">
-            Fermer
+    
+      <div class="relative flex items-center">
+        <!-- Navigation buttons for small screens -->
+        <button @click="scrollLeftFunc" class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800">
+          <v-icon>mdi-chevron-left-box</v-icon>
+        </button>
+        <div
+            ref="scrollContainer"
+            class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-hidden md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px]">
+          <v-btn variant="text"  @click="currentComponent = 'ManageAccount'">
+            <v-icon class="mr-2">mdi-account</v-icon>
+            Gestion de Comptes
           </v-btn>
-        </template>
-      </v-snackbar>
-      
+          <v-btn variant="text"  @click="currentComponent = 'PersonnalInfo'">
+            <v-icon class="mr-2">mdi-information</v-icon>
+            Informations personnelles
+          </v-btn>
+          <v-btn variant="text"  @click="currentComponent = 'PageInformations'">
+            <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+            Informations de votre page
+          </v-btn>
+          <v-btn variant="text"  @click="currentComponent = 'AccountSecurity'">
+            <v-icon class="mr-2">mdi-security</v-icon>
+            Sécurité
+          </v-btn>
+        </div>
+        <button @click="scrollRightFunc" class="rounded p-1 absolute right-2 z-10 md:hidden text-white bg-fuchsia-800">
+          <v-icon>mdi-chevron-right-box</v-icon>
+        </button>
+      </div>
+    </div>
+
+    <!-- Mid Content -->
+    <div class="flex flex-col flex-1 align-center py-12 p-3">
+      <template v-if="currentComponent === 'ManageAccount'">
+        <ManageAccount />
+      </template>
+      <template v-else-if="currentComponent === 'PageInformations'">
+        <PageInformations />
+      </template>
+      <template v-else-if="currentComponent === 'PersonnalInfo'">
+        <PersonnalInfo />
+      </template>
+      <template v-else-if="currentComponent === 'AccountSecurity'">
+        <AccountSecurity />
+      </template>
     </div>
   </div>
+
+  <SizeIndicator></SizeIndicator>
 </template>
 
-<script async setup>
-import CreatorAboutYou from "@/views/creators/CreatorAboutYou.vue";
-import SocialLinks from "@/views/main/SocialLinks.vue";
-import ProfileBanner from "@/views/main/ProfileBanner.vue";
-import {onBeforeMount, ref} from "vue";
-import {useUserStore} from "@/stores/user.js";
-import MyUserModel from "@/models/myUserModel.js";
-import {useClient} from "@/plugins/api.js";
+
+<script setup>
+import { ref, onBeforeMount, onMounted } from "vue";
+import { useUserStore } from "@/stores/user.js";
+import { useClient } from "@/plugins/api.js";
+import SizeIndicator from "@/views/tools/SizeIndicator.vue";
+import ManageAccount from "@/views/Account/ManageAccount.vue";
+import PageInformations from "@/views/Account/PageInformations.vue";
+import PersonnalInfo from "@/views/Account/PersonnalInfo.vue";
+import AccountSecurity from "@/views/Account/AccountSecurity.vue";
 
 const userStore = useUserStore();
 const client = useClient();
 
-const currentUser = ref(MyUserModel);
+const currentUser = ref(null);
 const snackbar = ref(false);
+const currentComponent = ref('ManageAccount'); // Default component
+const isDown = ref(false);
+const startX = ref(0);
+const scrollLeft = ref(0);
 
-onBeforeMount( () => {
+onBeforeMount(() => {
   try {
     currentUser.value = userStore.getCurrentUser();
-  } catch(error) {
+  } catch (error) {
     console.log("User not logged")
   }
-})
+});
 
-const profilePicture = ref(null);
-const bannerPicture = ref(null);
-const websiteIcon = ref(null);
+onMounted(() => {
+  const slider = document.querySelector('.custom-scroll');
+  slider.addEventListener('mousedown', (e) => {
+    isDown.value = true;
+    slider.classList.add('active');
+    startX.value = e.pageX - slider.offsetLeft;
+    scrollLeft.value = slider.scrollLeft;
+  });
 
-const updateProfilePicture = (file) => {
-  profilePicture.value = file;
+  slider.addEventListener('mouseleave', () => {
+    isDown.value = false;
+    slider.classList.remove('active');
+  });
+
+  slider.addEventListener('mouseup', () => {
+    isDown.value = false;
+    slider.classList.remove('active');
+  });
+
+  slider.addEventListener('mousemove', (e) => {
+    if (!isDown.value) return;
+    e.preventDefault();
+    const x = e.pageX - slider.offsetLeft;
+    const walk = (x - startX.value) * 3; // scroll-fast
+    slider.scrollLeft = scrollLeft.value - walk;
+  });
+});
+
+const scrollLeftFunc = () => {
+  const container = document.querySelector('.custom-scroll');
+  container.scrollBy({left: -100, behavior: 'smooth'});
 };
 
-const updateBannerPicture = (file) => {
-  bannerPicture.value = file;
+const scrollRightFunc = () => {
+  const container = document.querySelector('.custom-scroll');
+  container.scrollBy({left: 100, behavior: 'smooth'});
 };
-
-const updateWebsiteIcon = (file) => {
-  websiteIcon.value = file;
-};
-
-async function saveForm(){
-  snackbar.value = true;
-  await userStore.updateCurrentUser(client, currentUser.value, profilePicture.value, bannerPicture.value, websiteIcon.value);
-}
-
 </script>
 
-
 <style scoped>
 .save-btn {
   z-index: 10;
 }
+
+.custom-scroll {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.custom-scroll::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+.active {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
 </style>