Files
geovisio-website/src/components/Footer.vue
2023-10-13 12:29:25 +00:00

101 lines
2.0 KiB
Vue

<template>
<footer class="footer">
<ul class="link-list">
<li class="link-item">
<div class="link">
<Link
:text="$t('general.footer.panoramax_site')"
type="external"
target="_blank"
path-external="https://panoramax.fr/"
look="link"
:image="{
url: 'logo.jpeg',
alt: $t('general.footer.gitlab_logo')
}"
/>
</div>
</li>
<li class="link-item">
<div class="link">
<Link
:text="$t('general.footer.information_gitlab')"
type="external"
target="_blank"
path-external="https://gitlab.com/geovisio"
look="link"
:image="{
url: 'gitlab-logo.svg',
alt: $t('general.footer.gitlab_logo')
}"
/>
</div>
</li>
<li v-if="isInstanceIGN" class="link-item">
<div class="link">
<Link
:text="$t('general.footer.ay11_text')"
:route="{ name: 'ay11' }"
look="link link--grey"
/>
</div>
</li>
</ul>
</footer>
</template>
<script setup lang="ts">
import Link from './Link.vue'
import { computed } from 'vue'
const isInstanceIGN = computed((): boolean =>
window.location.href.includes('.ign.')
)
</script>
<style scoped lang="scss">
ul {
padding: 0;
margin: 0;
}
.footer {
padding: toRem(1.5) toRem(3);
border-top: toRem(0.1) solid var(--grey);
}
.link-list {
display: flex;
justify-content: center;
width: 100%;
}
.logo-list {
display: flex;
align-items: center;
}
.link-item {
width: fit-content;
margin-right: toRem(2);
&:last-child {
margin-right: 0;
}
}
.link {
color: var(--blue-dark);
@include text(s-regular);
height: toRem(2);
width: fit-content;
}
.logo {
margin-right: toRem(2);
height: toRem(2);
}
@media (max-width: toRem(50)) {
.title {
margin-bottom: 0;
}
.footer {
padding: toRem(2);
}
}
</style>