site_logiciels/components/Layout/Footer/Footer.vue

<template>
  <!--suppress VueUnrecognizedDirective -->
  <footer v-intersect="onIntersect">
    <LayoutContainer>
      <div>
        <v-row>
          <!-- Première section : Logo Opentalent -->
          <v-col cols="12" lg="3" class="logo">
            <nuxt-link to="/">
              <v-img src="/images/logo/footer-logo.png" />
            </nuxt-link>
          </v-col>

          <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
          <v-col v-if="mdAndUp" cols="2" >
            <v-row>
              <h5>
                Agenda culturel
              </h5>
            </v-row>
            <v-row>
              <nuxt-link to="/annuaire">
                Annuaire
              </nuxt-link>
            </v-row>
            <v-row>
              <nuxt-link to="/actualites">
                Actualités
              </nuxt-link>
            </v-row>
            <v-row>
              <nuxt-link to="/annonces">
                Annonces
              </nuxt-link>
            </v-row>
          </v-col>

          <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
          <v-col v-if="mdAndUp" cols="2">
            <v-row>
              <h5>
                Logiciels culturels
              </h5>
            </v-row>
            <v-row>
              <nuxt-link to="/opentalent_artist">
                Opentalent Artist
              </nuxt-link>
            </v-row>
            <v-row>
              <nuxt-link to="/opentalent_school">
                Opentalent School
              </nuxt-link
              >
            </v-row>
            <v-row>
              <nuxt-link to="/opentalent_manager">
                Opentalent Manager
              </nuxt-link>
            </v-row>
          </v-col>

          <!-- Quatrième section : liens espace client (écrans larges seulement) -->
          <v-col v-if="mdAndUp" cols="2">
            <v-row>
              <h5>
                Espace client
              </h5>
            </v-row>
            <v-row>
              <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil">
                Foire Aux Questions
              </nuxt-link>
            </v-row>
            <v-row>
              <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
                Support en ligne
              </nuxt-link>
            </v-row>
            <v-row>
              <nuxt-link to="/nous-contacter" target="_blank" >
                Nous contacter
              </nuxt-link>
            </v-row>
          </v-col>

          <!-- Cinquième section : liens réseaux sociaux (écrans larges seulement) -->
          <v-col v-if="mdAndUp" cols="3">
            <v-row>
              <h5>
                Suivez-nous
              </h5>
            </v-row>

            <v-row class="social-networks">
              <v-col cols="2">
                <nuxt-link
                  href="https://www.facebook.com/opentalent"
                  target="_blank"
                  class="fab fa-facebook"
                />
              </v-col>
              <v-col cols="2">
                <nuxt-link
                  href="https://twitter.com/Opentalent_FRA"
                  target="_blank"
                  class="fa-brands fa-square-twitter"
                />
              </v-col>
              <v-col cols="2">
                <nuxt-link
                  href="https://www.linkedin.com/company/2iopenservice"
                  target="_blank"
                  class="fab fa-linkedin"
                />
              </v-col>

              <v-col cols="2">
                <nuxt-link
                  href="https://www.youtube.com/@Opentalent74300"
                  target="_blank"
                  class="fab fa-youtube"
                />
              </v-col>
            </v-row>
          </v-col>
        </v-row>

        <!-- Deuxième section alt : version petits écrans -->
        <v-row
          v-if="mdAndDown"
          class="justify-center social-networks"
        >
          <!-- TODO: voir si faisable de fusionner avec la section précédente -->
          <v-col cols="12" class="text-center">
            <nuxt-link
              href="https://www.facebook.com/opentalent"
              target="_blank"
              class="fab fa-facebook"
            />
            <nuxt-link
              href="https://twitter.com/Opentalent_FRA"
              target="_blank"
              class="fa-brands fa-square-twitter"
            />
            <nuxt-link
              href="https://www.linkedin.com/company/2iopenservice"
              target="_blank"
              class="fab fa-linkedin"
            />
            <nuxt-link
              href="https://www.youtube.com/@Opentalent74300"
              target="_blank"
              class="fab fa-youtube"
            />
          </v-col>
        </v-row>
      </div>

      <!-- Troisième section alt : version petits écrans -->
      <v-row v-if="mdAndDown">
        <v-col cols="12" >
          <div v-for="(item, index) in footerLinks" :key="index">
            <v-container>
              <div class="section" @click="toggleSection(index)">
                <div class="d-flex flex-row justify-space-between">
                  {{ item.label }}

                  <v-icon
                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
                  />
                </div>

                <div
                  v-show="isActive(index)"
                  v-for="(sublink, sublinkIndex) in item.sublink"
                  :key="sublinkIndex"
                  class="mt-3"
                >
                  <nuxt-link :to="sublink.link">
                    {{ sublink.label }}
                  </nuxt-link>
                </div>
              </div>
            </v-container>

          </div>
        </v-col>
      </v-row>

      <div class="footnotes">
        <v-row justify="center">
          <p class="mt-6">
            <a href="/mentions-legales" target="_blank">
              Mentions légales
            </a>
            -
            <a href="/politiques-de-cookies" target="_blank">
              Politiques de cookies
            </a>
            -
            <a href="/CGV" target="_blank">
              Conditions Générales de Ventes
            </a>
          </p>
        </v-row>

        <v-row class="mb-6" justify="center">
          <p>
            2024 &copy; Tous droits réservés par Opentalent
          </p>
        </v-row>
      </div>
    </LayoutContainer>
  </footer>
</template>

<script setup>
import { useDisplay } from "vuetify";
import { useLayoutStore } from "~/stores/layoutStore";


const { mdAndDown, mdAndUp } = useDisplay();

const footerLinks = ref([
  {
    label: "AGENDA CULTUREL",
    sublink: [
      {
        label: "Annuaire",
        link: "/annuaire",
      },
      {
        label: "Actualités",
        link: "/actualites",
      },
      {
        label: "Annonces",
        link: "/annonces",
      },
    ],
  },
  {
    label: "LOGICIELS CULTURELS ",
    sublink: [
      {
        label: "Opentalent Artist",
        link: "/opentalent_artist)",
      },
      {
        label: "Opentalent School",
        link: "/opentalent_school",
      },
      {
        label: "Opentalent Manager",
        link: "/opentalent_manager",
      },
    ],
  },
  {
    label: "À PROPOS ",
    sublink: [
      {
        label: "Qui sommes-nous",
        link: "/qui-sommes-nous)",
      },
      {
        label: "Nous rejoindre",
        link: "/nous-rejoindre",
      },
      {
        label: "Nous contacter",
        link: "/nous-contacter",
      },
    ],
  },
  {
    label: "ESPACE CLIENT ",
    sublink: [
      {
        label: "Foire Aux Questions ",
        link: "/ https://ressources.opentalent.fr/)",
      },
      {
        label: "Support en ligne ",
        link: "/https://ressources.opentalent.fr/?contact",
      },
      {
        label: "Nous contacter ",
        link: "/nous-contacter",
      },
    ],
  },
]);

const activeIndex = ref(-1);
function toggleSection(index) {
  activeIndex.value = activeIndex.value === index ? -1 : index;
}

function isActive(index) {
  return activeIndex.value === index;
}

const layoutStore = useLayoutStore()
const onIntersect = (isIntersecting) => {
  layoutStore.setIsFooterVisible(isIntersecting)
}

</script>

<style scoped lang="scss">

.container {
  background: #091d20;
  color: aliceblue; // TODO: replace by primary color variable
}

.logo .v-img {
  margin-bottom: 3rem;
  width: 25rem;
}

.v-col {
  padding: 12px;
}

.container {
  font-family: "Barlow", serif;
  font-style: normal;
  padding-top: 32px;
}

h5 {
  font-weight: 500;
  line-height: 20px;
  margin-top: 20px;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

a {
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 20px;
  color: #ffffff;
  text-decoration: none !important;
  margin-bottom: 0.5rem;
}

.social-networks {
  a {
    color: #ecfbfc;
    font-size: 1.9rem;
    text-decoration: none !important;
  }
}

.footnotes {
  margin-top: 2rem;
  border-top: 0.4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.07);

  a, p {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.8rem;
  }
}

@media (max-width: 960px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
  }

  .logo .v-img {
    width: 18rem;
  }

  .social-networks {
    a {
      font-size: 3rem;
      margin: 0 1rem;
    }
  }

  .section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    font-family: "Barlow", serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;

    >div:first-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding-bottom: 6px;
      text-transform: uppercase;
    }

    a {
      font-family: "Barlow", serif;
      font-style: normal;
      font-weight: 300;
      font-size: 1.3rem;
      line-height: 20px;
      color: #ffffff;
      text-decoration: none !important;
      text-align: left;
    }
  }

  .footnotes {
    border: none;
  }
}
</style>