site_logiciels/components/Logiciels/School/MenuScroll.vue

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

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

const menus = [
  { label: "Presentation" },
  { label: "Avantages" },
  { label: "Fonctionnalites" },
  { label: "Comparatif" },
  { label: "détails" },
  { label: "abonnement" },
  { label: "Temoignages" },
  { label: "formations" },
  { 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>