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="{ path: '', hash: '#top'}">
              <v-img
                src="/images/logo/footer-logo.png"
                alt="Logo Opentalent - Agenda et Logiciels culturels"
              />
            </nuxt-link>
          </v-col>

          <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
          <v-col v-if="lgAndUp" cols="7" >
            <v-row>
              <v-col cols="3">
                <v-row>
                  <h5>
                    Agenda culturel
                  </h5>
                </v-row>
                <v-row>
                  <AgendaLink href="/annuaire">
                    Annuaire
                  </AgendaLink>
                </v-row>
                <v-row>
                  <AgendaLink href="/actualites">
                    Actualités
                  </AgendaLink>
                </v-row>
                <v-row>
                  <AgendaLink href="/annonces">
                    Annonces
                  </AgendaLink>
                </v-row>
              </v-col>

              <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
              <v-col cols="3">
                <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 : A propos (écrans larges seulement) -->
              <v-col cols="3">
                <v-row>
                  <h5>
                    A PROPOS
                  </h5>
                </v-row>
                <v-row>
                  <nuxt-link to="/qui-sommes-nous">
                    Qui sommes-nous
                  </nuxt-link>
                </v-row>
                <v-row>
                  <nuxt-link to="/nous-rejoindre">
                    Nous rejoindre
                  </nuxt-link
                  >
                </v-row>
                <v-row>
                  <nuxt-link to="/nous-contacter">
                    Nous contacter
                  </nuxt-link>
                </v-row>
              </v-col>

              <!-- Cinquième section : liens espace client (écrans larges seulement) -->
              <v-col cols="3">
                <v-row>
                  <h5>
                    Espace client
                  </h5>
                </v-row>
                <v-row>
                  <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil" target="_blank">
                    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-col>
            </v-row>
          </v-col>

          <!-- Sixième section : liens réseaux sociaux (écrans larges seulement) -->
          <v-col v-if="lgAndUp" cols="2">
            <v-row class="justify-center">
              <h5>
                Suivez-nous
              </h5>
            </v-row>

            <v-row class="justify-center social-networks">
              <v-col cols="2">
                <nuxt-link
                  href="https://www.facebook.com/opentalent"
                  target="_blank"
                  class="fab fa-square-facebook"
                />
              </v-col>
              <v-col cols="2">
                <nuxt-link
                  href="https://twitter.com/Opentalent_FRA"
                  target="_blank"
                  class="fa-brands fa-square-x-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-square-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-square-facebook"
            />
            <nuxt-link
              href="https://twitter.com/Opentalent_FRA"
              target="_blank"
              class="fa-brands fa-square-x-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-square-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 :href="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">
            <nuxt-link to="/mentions-legales">
              Mentions légales
            </nuxt-link>
            -
            <nuxt-link to="/politique-de-confidentialite-et-protection-des-donnees-personnelles">
              Politiques de confidentialité
            </nuxt-link>
            -
            <nuxt-link to="/CGV">
              Conditions Générales de Ventes
            </nuxt-link>
          </p>
        </v-row>

        <v-row class="mb-3" 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";
import AgendaLink from "~/components/Common/AgendaLink.vue";


const { mdAndDown, mdAndUp, lgAndUp, lgAndDown } = 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: var(--primary-color);
  color: var(--on-primary-color);
}

.logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
}

.logo .v-img {
  height: 120px;
  width: 300px;
}

.v-col {
  padding: 12px;
}

.container {
  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: var(--on-primary-color);
  text-decoration: none !important;
  margin-bottom: 0.5rem;
}

.social-networks {
  a {
    color: var(--on-primary-color);
    font-size: 1.9rem;
    text-decoration: none !important;
  }

  @media (max-width: 1240px) {
    a {
      margin: 0 3%;
      font-size: 2.4rem;
    }
  }
}

.footnotes {
  border-top: 0.4px solid var(--neutral-color-alt-strong);
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.07);

  a, p {
    text-decoration: none;
    color: var(--on-primary-color);
    font-size: 0.8rem;

    @media (max-width: 600px) {
      max-width: 90%;
      text-align: center;

    }
  }
}

@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-weight: 700;
    font-size: 1.5rem;
    cursor: pointer;

    >div:first-child {
      border-bottom: 1px solid var(--on-primary-color);
      padding-bottom: 6px;
      text-transform: uppercase;
    }

    a {
      font-weight: 300;
      font-size: 1.3rem;
      line-height: 20px;
      color: var(--on-primary-color);
      text-decoration: none !important;
      text-align: left;
    }
  }

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