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

          <nuxt-link
            v-if="isSticky"
            :to="{ path: '', hash: '#top' }"
            class="px-3 py-1"
          >
            <v-icon icon="fa fa-angle-up" />
          </nuxt-link>
        </v-list>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup lang="ts">
import type { ComputedRef, PropType, Ref } from 'vue'
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(
      ([_, value]) => value
    )?.[0] ?? null
  )
})

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

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

.menu-container {
  top: -32px;
  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(--scroll-menu-primary-color);
  color: var(--scroll-menu-on-primary-color);
  border-radius: 16px !important;
  padding: 5px;
}
</style>