site_logiciels/components/Logiciels/Artist/MenuScroll.vue

<template>
  <div id="Presentation">
    <LayoutContainer>
      <v-row>
        <v-col
          cols="12"
          class="menu-container"
        >
          <div
            v-for="menu in menus"
            :key="menu.label"
            @click="navigate(menu)"
          >
            <v-chip
              v-if="activeMenu === menu.label"
              class="active-menu"
            >
              {{
                menu.label
              }}
            </v-chip>
            <span v-else>{{ menu.label }}</span>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup>
import { ref } from "vue";

const menus = [
  { label: "Presentation" },
  { label: "Avantages" },
  { label: "Fonctionnalites" },
  { label: "Comparatif" },
  { label: "Contact" },
  { label: "Accompagnement" },
  { label: "Temoignages" },
  { label: "Aide" },
];

const activeMenu = ref(menus[0].label);

const navigate = (menu) => {
  activeMenu.value = menu.label;
  const element = document.getElementById(menu.label);
  if (element) {
    element.scrollIntoView({ behavior: "smooth" });
  }
};
</script>

<style scoped>
.menu-container {
  display: flex;
  justify-content: space-around;
  padding: 1rem 10rem;
  background: white;
  color: #bbb8b8;
  font-family: "Barlow";
  font-size: 12px;
  line-height: 16px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 0.1rem solid #eaeaea;
}

.v-chip.active-menu {
  background: black;
  color: white;
}

.menu-container div:hover {
  cursor: pointer;
  text-decoration: underline;
}
</style>