From 705aa50d394579b91dbfc71da1ea601eaecd800b Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Fri, 26 Jul 2024 13:20:16 -0400
Subject: [PATCH] Update Profile - fixe tailwind values

---
 src/views/main/Profile.vue | 103 ++++++++++++++++++++++++-------------
 1 file changed, 67 insertions(+), 36 deletions(-)

diff --git a/src/views/main/Profile.vue b/src/views/main/Profile.vue
index e86e579..069ed25 100644
--- a/src/views/main/Profile.vue
+++ b/src/views/main/Profile.vue
@@ -1,46 +1,49 @@
 <template>
   <div class="flex flex-col md:flex-row">
-
     <!-- 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>
-    
-      <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>
-          <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 class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
+      <div class="sticky top-0 z-30 bg-[#f4f4f4]">
+        <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
+          <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
+          <div class="relative flex items-center md:mt-0 w-full">
+            <!-- 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-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
+                @mousedown="mouseDown"
+                @mouseleave="mouseLeave"
+                @mouseup="mouseUp"
+                @mousemove="mouseMove">
+              <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
+                <v-icon class="mr-2">mdi-account</v-icon>
+                Gestion de Comptes
+              </v-btn>
+              <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>
-        <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">
+    <div class="flex flex-col flex-1 align-center py-12 p-3 mt-48 md:mt-0">
       <template v-if="currentComponent === 'ManageAccount'">
         <ManageAccount />
       </template>
@@ -59,7 +62,6 @@
   <SizeIndicator></SizeIndicator>
 </template>
 
-
 <script setup>
 import { ref, onBeforeMount, onMounted } from "vue";
 import { useUserStore } from "@/stores/user.js";
@@ -116,6 +118,35 @@ onMounted(() => {
   });
 });
 
+const mouseDown = (e) => {
+  const slider = document.querySelector('.custom-scroll');
+  isDown.value = true;
+  slider.classList.add('active');
+  startX.value = e.pageX - slider.offsetLeft;
+  scrollLeft.value = slider.scrollLeft;
+};
+
+const mouseLeave = () => {
+  isDown.value = false;
+  const slider = document.querySelector('.custom-scroll');
+  slider.classList.remove('active');
+};
+
+const mouseUp = () => {
+  isDown.value = false;
+  const slider = document.querySelector('.custom-scroll');
+  slider.classList.remove('active');
+};
+
+const mouseMove = (e) => {
+  if (!isDown.value) return;
+  e.preventDefault();
+  const slider = document.querySelector('.custom-scroll');
+  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'});