site_logiciels/components/Layout/UI/StickyMenu.vue

<template>
  <div :class="stickyClass" >
    <v-row class="outil-row" justify="end">
      <v-col cols="3">
        <div class="container-square">
          <v-row v-for="square in squares" :key="square.id" :class="square.bgColor">
            <div>
              <v-icon :class="square.iconClass" />
              <p class="text-square">{{ square.text }}</p>
            </div>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";

const props = defineProps({
  shouldShowStickyMenu: Boolean,
  squaresData: Array,
});

const stickyClass = ref("sticky-scroll");

const squares = ref(props.squaresData);

</script>

<style scoped>
.container-square {
  display: flex;
  flex-direction: column;
  justify-content: space between;
  color: white;
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.red-square,
.yellow-square,
.blue-square,
.darkblue-square {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Barlow";
  width: 10rem;
  height: 7rem;
  margin-left: 14rem;
  padding: 1rem;
}

.yellow-square {
  background: #f9d648;
  color: #0e2d32;
}

.red-square {
  background: #d8050b;
}

.blue-square {
  background: rgba(32, 147, 190);
}

.darkblue-square {
  background: #0e2d32;
}

.text-square {
  margin: 0.5rem 2rem;
}

.icon {
  margin-right: 1rem;
}

.icon-logiciel {
  color: rgba(32, 147, 190);
  margin-right: 1rem;
}

.outil-row {
  margin: 5rem 0;
}

#sticky-menu {
  position: sticky;
  top: 10rem;
  z-index: 10;
  right: 0;
  margin-bottom: -40rem;
}
</style>