social-media/src/views/profile/ProfilePage.vue

<template>
  <div class="flex flex-col md:flex-row">

    <!-- Left Menu -->
    <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-20 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-fuchsia-800 bg-[#f4f4f4] 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 = 'PersonnalInfo'">
                <v-icon class="mr-2">mdi-information</v-icon>
                {{ $t('profilemenu.user') }}
              </v-btn>

              <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
                <v-icon class="mr-2">mdi-account</v-icon>
                {{ $t('profilemenu.accountmanagement') }}
              </v-btn>

              <v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
                <v-icon class="mr-2">mdi-security</v-icon>
                {{ $t('profilemenu.security') }}
              </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 === 'ManageAccount'">
        <manage-account></manage-account>
      </template>
      <template v-else-if="currentComponent === 'CreatorPage'">
        <creator-page></creator-page>
      </template>
      <template v-else-if="currentComponent === 'PersonnalInfo'">
        <personnal-info></personnal-info>
      </template>
      <template v-else-if="currentComponent === 'AccountSecurity'">
        <account-security></account-security>
      </template>
    </div>
  </div>

</template>

<script setup>
import {ref, onMounted} from "vue";
import ManageAccount from "@/views/profile/management/ManageAccount.vue";
import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
import PersonnalInfo from "@/views/profile/account/PersonnalInfo.vue";
import AccountSecurity from "@/views/profile/security/AccountSecurity.vue";

const currentComponent = ref('PersonnalInfo'); // Default component
const isDown = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);

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;
  });

  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 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>