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/logos/opentalent/Logo_Opentalent-blanc.png"
                alt="Logo Opentalent - Agenda et Logiciels culturels"
              />
            </nuxt-link>
          </v-col>

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

              <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
              <v-col cols="3">
                <v-row>
                  <h5>Logiciels</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>&Agrave; 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 class="lg-and-up" 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 class="md-and-down 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 class="md-and-down">
        <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-for="(sublink, sublinkIndex) in item.sublink"
                  v-show="isActive(index)"
                  :key="sublinkIndex"
                  class="mt-3"
                >
                  <nuxt-link :href="sublink.link" :target="sublink.target">
                    {{ 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é et cookies
            </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 © Opentalent est une marque déposée par 2iOPENservice</p>
        </v-row>
      </div>
    </LayoutContainer>
  </footer>
</template>

<script setup lang="ts">
import { useLayoutStore } from '~/stores/layoutStore'
import AgendaLink from '~/components/Common/AgendaLink.vue'
import UrlUtils from '~/services/utils/urlUtils.js'

const runtimeConfig = useRuntimeConfig()

const makeAgendaLink = (path: string) => {
  return UrlUtils.join(runtimeConfig.public.agendaBaseUrl as string, path)
}

const footerLinks = ref([
  {
    label: 'AGENDA',
    sublink: [
      {
        label: 'Annuaire',
        link: makeAgendaLink('/annuaire'),
        target: '_self',
      },
      {
        label: 'Actualités',
        link: makeAgendaLink('/actualites-culturelles'),
        target: '_self',
      },
      {
        label: 'Annonces',
        link: makeAgendaLink('/annonces-culturelles'),
        target: '_self',
      },
    ],
  },
  {
    label: 'LOGICIELS ',
    sublink: [
      {
        label: 'Opentalent Artist',
        link: '/opentalent-artist',
        target: 'self',
      },
      {
        label: 'Opentalent School',
        link: '/opentalent-school',
        target: 'self',
      },
      {
        label: 'Opentalent Manager',
        link: '/opentalent-manager',
        target: 'self',
      },
    ],
  },
  {
    label: 'À PROPOS ',
    sublink: [
      {
        label: 'Qui sommes-nous',
        link: '/qui-sommes-nous',
        target: 'self',
      },
      {
        label: 'Nous rejoindre',
        link: '/nous-rejoindre',
        target: 'self',
      },
      {
        label: 'Nous contacter',
        link: '/nous-contacter',
        target: 'self',
      },
    ],
  },
  {
    label: 'ESPACE CLIENT ',
    sublink: [
      {
        label: 'Foire Aux Questions ',
        link: 'https://ressources.opentalent.fr',
        target: 'self',
      },
      {
        label: 'Support en ligne ',
        link: 'https://ressources.opentalent.fr/?contact',
        target: 'self',
      },
    ],
  },
])

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

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

const layoutStore = useLayoutStore()
const onIntersect = (isIntersecting: boolean) => {
  layoutStore.setIsFooterVisible(isIntersecting)
}
</script>

<style scoped lang="scss">
.container {
  background: var(--primary-color);
  color: var(--on-primary-color);
  padding-top: 32px;
}

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

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

.v-col {
  padding: 12px;
}

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: 2rem;
      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>