ff-admin/src/components/Header.vue

<template>
  <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
    <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
      <img src="/Logo.png" alt="LOGO" class="h-full w-auto" />
      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">{{config.app_name_overwrite || "FF Admin"}}</h1>
    </RouterLink>
    <div class="flex flex-row gap-2 items-center">
      <div v-if="authCheck" class="hidden md: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"
        />
        <TopLevelLink
          v-else-if="routeName == 'account' || routeName.includes('account-') || routeName == 'docs' || routeName.includes('docs-')"
          :link="{ key: 'club', title: 'Zur Verwaltung', levelDefault: '' }"
          :disable-sub-link="true"
        />
      </div>
      <UserMenu v-if="authCheck" />
    </div>
  </header>
</template>

<script setup lang="ts">
import { RouterLink } from "vue-router";
import { mapState } from "pinia";
import { useAuthStore } from "@/stores/auth";
import { useNavigationStore } from "@/stores/admin/navigation";
import TopLevelLink from "./admin/TopLevelLink.vue";
import UserMenu from "./UserMenu.vue";
import { config } from "@/config"
</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>