I finished the overhaul of the profile menu. I still need to create the modals for each value.

src/views/main/Header.vue

@@ -187,4 +187,5 @@ onBeforeUnmount(() => {
   @apply bg-[#903175] text-gray-200;
 }
 
+
 </style>

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>