site_logiciels/components/Logiciels/School/StickyMenu.vue

<template>
  <div id="sticky-menu">
    <LayoutContainer >
      <v-row class="outil-row">
        <v-col cols="3">
          <div class="container-square">
            <v-row class="blue-square">
              <div>
                <v-icon class="fa-regular fa-comments icon" />
                <p class="text-square">Nous contacter</p>
              </div>
            </v-row>

            <v-row class="blue-square">
              <div>
                <v-icon class="fa-regular fa-circle-info icon" />
                <p class="text-square">Demander une demo</p>
              </div>
            </v-row>

            <v-row class="blue-square">
              <div>
                <v-icon class="fa-brands fa-readme icon" />
                <p class="text-square">Brochure</p>
              </div>
            </v-row>

            <v-row class="darkblue-square">
              <div>
                <v-icon class="fa-solid fa-phone icon" />
                <p class="text-square">Nous Appeler</p>
              </div>
            </v-row>
          </div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup></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;
}

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

.blue-square {
  background:blue;
}

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

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

.icon {
  margin-right: 1rem;
}

.icon-logiciel {
  color: #9EDBDD;
  margin-right: 1rem;
}

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

#sticky-menu {
  position: sticky;
  top: 10rem;
  z-index: 10;
  left: 0; 
  margin-bottom: -40rem;
}

</style>