Footer.vue

<template>
  <footer class="tw-p-2 tw-bg-gray-800">
    <b-container>
      <b-row>
        <b-col>
          aura/<b>dashboard</b> v{{ version }}
          <span v-for="mod in modules" :key="mod.slug">
            |
            <router-link :to="mod.slug">
              {{ mod.title }}
            </router-link>
          </span>

          |
          <router-link to="/credits"> Credits </router-link>
        </b-col>
        <b-col align="right">
          {{ $t('footer.tagline') }}
        </b-col>
      </b-row>
    </b-container>
  </footer>
</template>

<script>
export default {
  props: {
    modules: {
      type: Array,
      required: true,
    },
  },
  computed: {
    version() {
      return import.meta.env.VUE_APP_VERSION
    },
  },
}
</script>

<style scoped>
footer {
  border-top: 1px solid #2e3436;
  color: rgba(255, 255, 255, 0.5);
  width: 100%;
  margin-top: auto;
}
</style>