ff-admin/src/components/Footer.vue

<template>
  <footer
    v-if="authCheck && routeName.includes('admin')"
    class="md:hidden flex flex-row 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-for="item in topLevel" :key="item.key" :link="item" :disableSubLink="true" />
    </div>
  </footer>
</template>

<script setup lang="ts">
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">
import { defineComponent } from "vue";
export default defineComponent({
  computed: {
    ...mapState(useAuthStore, ["authCheck"]),
    ...mapState(useNavigationStore, ["topLevel"]),
    routeName() {
      return typeof this.$route.name == "string" ? this.$route.name : "";
    },
  },
});
</script>