Add 'frontend/' from commit 'c070c0315d66a44154ab7d9f9ea6c211a15f4dba'

git-subtree-dir: frontend
git-subtree-mainline: 205a3bd14b
git-subtree-split: c070c0315d

frontend/src/views/profile/ProfilePage.vue

@@ -0,0 +1,147 @@
+<template>
+  <!-- Mobile -->
+  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
+    <!-- Image -->
+    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
+
+    <!-- Message -->
+    <div class="text-lg text-gray-700 mt-8">
+      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
+      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
+      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+    </div>
+  </div>
+
+  <!-- PC -->
+  <div v-else>
+    <div class="flex flex-col md:flex-row bg-[#f4f4f4] h-full">
+      <!-- Left Menu -->
+      <div class=" 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-20 z-30">
+          <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">{{$t('profilemenu.manageyouraccount')}}</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-fuchsia-800 text-2xl ">
+                <v-icon>mdi-chevron-left</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 = 'CreatorPage'">
+                  <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
+                  {{ $t('profilemenu.creator') }}
+                </v-btn>
+
+                <v-btn variant="text" @click="currentComponent = 'AccountPage'">
+                  <v-icon class="mr-2">mdi-information</v-icon>
+                  {{ $t('profilemenu.user') }}
+                </v-btn>
+
+              </div>
+              <button @click="scrollRightFunc"
+                      class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
+                <v-icon>mdi-chevron-right</v-icon>
+              </button>
+            </div>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Mid Content -->
+      <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
+        <template v-if="currentComponent === 'CreatorPage'">
+          <creator-page></creator-page>
+        </template>
+        <template v-else-if="currentComponent === 'AccountPage'">
+          <account-page></account-page>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
+import AccountPage from "@/views/profile/account/AccountPage.vue";
+import { useRoute } from "vue-router";
+import { useDisplay } from "vuetify";
+
+const { smAndDown } = useDisplay();
+
+const route = useRoute();
+const startingComponent = route.query.target || 'CreatorPage';
+const currentComponent = ref(startingComponent);
+
+const isMobileView = ref(smAndDown.value);
+
+watch(smAndDown, (newVal) => {
+  isMobileView.value = newVal;
+});
+
+// Gestion du slider (scroll sur petit écran)
+const isDown = ref(false);
+const startX = ref(0);
+const scrollLeft = ref(0);
+
+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' });
+};
+
+const scrollRightFunc = () => {
+  const container = document.querySelector('.custom-scroll');
+  container.scrollBy({ left: 100, behavior: 'smooth' });
+};
+</script>
+
+
+<style scoped>
+.custom-scroll {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.custom-scroll::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+</style>