ff-admin/src/components/Footer.vue

<template>
  <footer
    v-if="authCheck && (routeName.includes('admin-') || routeName.includes('account-') || routeName.includes('docs-'))"
    class="md:hidden flex flex-row h-16 min-h-16 justify-center md:justify-normal p-1 bg-white"
  >
    <div class="w-full flex flex-row gap-2 h-full align-middle">
      <TopLevelLink
        v-if="routeName == 'admin' || routeName.includes('admin-')"
        v-for="item in topLevel"
        :key="item.key"
        :link="item"
        :disableSubLink="true"
      />
      <TopLevelLink
        v-else-if="
          routeName == 'account' || routeName.includes('account-') || routeName == 'docs' || routeName.includes('docs-')
        "
        :link="{ key: 'club', title: 'Zur Admin Oberfläche', levelDefault: '' }"
        :disableSubLink="true"
      />
    </div>
  </footer>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState } from "pinia";
import { useAuthStore } from "@/stores/auth";
import { useNavigationStore } from "@/stores/admin/navigation";
import TopLevelLink from "./admin/TopLevelLink.vue";
</script>

<script lang="ts">
export default defineComponent({
  computed: {
    ...mapState(useAuthStore, ["authCheck"]),
    ...mapState(useNavigationStore, ["topLevel"]),
    routeName() {
      return typeof this.$route.name == "string" ? this.$route.name : "";
    },
  },
});
</script>