site_logiciels/components/Common/MenuScroll.vue

<!--
Menu de navigation entre les sections d'une page, accrochée au haut de l'écran sur les écrans larges
-->
<template>
  <LayoutContainer v-scroll="handleScroll">
    <v-row>
      <v-col
        cols="12"
      >
        <v-list
          class="menu-container"
          density="compact"
          :class="{ 'sticky-menu': isSticky }"
        >
          <nuxt-link
            v-if="isSticky"
            :to="{ path: '', hash: '#top' }"
            class="px-3 py-1"
          >
            <v-icon icon="fa fa-angle-up" />
          </nuxt-link>

          <div v-for="menu in menus" :key="menu.anchor">
            <nuxt-link :to="{ path: '', hash: '#' + menu.anchor }">
              <v-list-item
                :class="{ active : isSticky && menu.anchor === activeMenuItem }"
              >
                {{ menu.label }}
              </v-list-item>
            </nuxt-link>
          </div>
        </v-list>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { PropType } from "@vue/runtime-core";
import type { MenuScroll } from "~/types/interface";
import { useLayoutStore } from "~/stores/layoutStore";

defineProps({
  menus: {
    type: Array as PropType<Array < MenuScroll >>,
    required: true
  }
});

const layoutStore = useLayoutStore()

const isSticky: Ref<boolean> = ref(false);

const activeMenuItem: ComputedRef<string | null> = computed(() => {
  return Object.entries(
    layoutStore.isAnchoredSectionOnScreen
  ).find(
    ([key, value]) => value === true
  )?.[0] ?? null
})

const handleScroll = () => {
  isSticky.value = window.scrollY > 800;
}
</script>

<style scoped lang="scss">
.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--neutral-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.menu-container {
  z-index: 3;
  display: flex;
  justify-content: center;
  background: var(--neutral-color);
  color: var(--on-neutral-color);
  font-size: 15px;
  line-height: 19px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 0.1rem solid var(--on-neutral-color-extra-light);

  a {
    text-decoration: none;
    color: var(--on-neutral-color);
  }

  a:hover {
    text-decoration: underline;
  }
}

.active {
  background-color: var(--on-primary-color);
  color: var(--primary-color);
  border-radius: 16px;
  padding: 5px;
}
</style>