social-media/src/views/main/Profile.vue

<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>
        <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 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(null);
const snackbar = ref(false);
const currentComponent = ref('ManageAccount'); // Default component
const isDown = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);

onBeforeMount(() => {
  try {
    currentUser.value = userStore.getCurrentUser();
  } catch (error) {
    console.log("User not logged")
  }
});

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