sauvagerie/components/Footer.vue

<template>
  <v-footer no-gutters :height="$vuetify.display.smAndDown ? 48 : 36" class="footer">
    <div class="footer-content">
      <span>{{ $t('footer_copyright', { year: new Date().getFullYear() }) }}</span>
      <span class="divider">|</span>
      <NuxtLink to="/mentions-legales" class="legal-link">{{ $t('footer_legal') }}</NuxtLink>
    </div>
  </v-footer>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { useDisplay } from 'vuetify'

const { t } = useI18n()
const { smAndDown } = useDisplay()
</script>

<style scoped lang="scss">
.footer {
  background-color: rgba(var(--v-theme-card-background), 0.65) !important;
  color: rgb(var(--v-theme-on-background)) !important;
  text-align: center;
  font-size: 0.85rem;
  backdrop-filter: blur(5px);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  margin: 0;
  width: 100%;

  .footer-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;

    @media (max-width: 600px) {
      flex-direction: column;

      .divider {
        display: none;
      }
    }

    .divider {
      margin: 0 12px;
    }

    .legal-link {
      color: rgb(var(--v-theme-on-background));
      text-decoration: none;

      &:hover {
        text-decoration: underline;
        color: rgb(var(--v-theme-primary));
      }
    }
  }
}
</style>