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="/FFW-Logo.svg" alt="LOGO" class="h-full w-auto" />
      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</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.includes('admin')" v-for="item in topLevel" :key="item.key" :link="item" />
        <TopLevelLink v-else :link="{ key: 'club', title: 'Zur Verwaltung' }" :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";
</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>