officialWebsite/src/components/AppHeader.vue

<template>
   <header className="header">
      <div class="logo">
        <img src="@/assets/image/logo.png" alt="logo" />
      </div>
      <div class="tabs">
        <div class="tab-item" :class="{ active: currentTab === 'home' }" @click="handleTabClick('home')">
          {{ t('home.nav.home') }}
        </div>
        <div class="tab-item" :class="{ active: currentTab === 'companyprofil' }" @click="handleTabClick('companyprofil')">
          {{ t('home.nav.company') }}
        </div>
        <div class="tab-item" :class="{ active: currentTab === 'business' }" @click="handleTabClick('business')">
          {{ t('home.nav.business') }}
        </div>
      </div>
    </header>
</template>
<script setup>
import { useI18n } from 'vue-i18n';

import { useRouter } from "vue-router";
import { useHome } from '@/store/home/index.js';
const router = useRouter();
const { currentTab } = useHome();
const { t } = useI18n();

const handleTabClick = (tab) => {
  currentTab.value = tab;
  router.push('/'+tab);
}
</script>
<style scoped lang="scss">

</style>