static/src/components/PageFooter.vue

<template>
  <!-- style 'z-index: 1001' here is needed to avoid override from leafletjs css -->
  <footer class="fixed bottom-0 w-full pl-4 font-light text-xs" style="z-index: 9999;" v-if="showFooterRef">
    <div class="relative flex items-center bg-gray-200 h-6">
      <div class="pl-1 w-full">
        <p class="">
          <span>Trouble on scrolling? Open the
            <PageFooterHyperlink :path="currentPageUrl">direct URL space</PageFooterHyperlink> as a new tab. </span>
          <span>Curious? Read my <PageFooterHyperlink path="https://trinca.tornidor.com">blog</PageFooterHyperlink> and 
          <PageFooterHyperlink :path="aboutThisUrl">{{aboutThisDescription}}</PageFooterHyperlink>.</span>
        </p>
      </div>
      <div class="pr-2">
        <button
          aria-label="Close"
          class="shrink-0 rounded-lg bg-black/10 p-1 transition hover:bg-black/20"
          @click="showFooterRef = !showFooterRef"
        >Close</button>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import PageFooterHyperlink from "@/components/PageFooterHyperlink.vue";

const showFooterRef = ref(true)

const props = defineProps<{
  currentPageUrl: string,
  aboutThisUrl: string,
  aboutThisDescription: string
}>()
</script>