<template>
  <div>
    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="198" to="/">
      <img v-if="active === ''" src="~/assets/images/desktop/common/menu/uebersicht-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/uebersicht-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="254" to="/postfach">
      <img v-if="active === 'postfach'" src="~/assets/images/desktop/common/menu/postfach-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/postfach-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="310" to="/vertraege">
      <img v-if="active === 'vertraege'" src="~/assets/images/desktop/common/menu/vertraege-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/vertraege-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="366" to="/services">
      <img v-if="active === 'services'" src="~/assets/images/desktop/common/menu/services-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/services-button.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-frame-h="56" v-frame-w="232" v-frame-x="12" v-frame-y="422" to="/tipps">
      <img v-if="active === 'tipps'" src="~/assets/images/desktop/common/menu/tipps-button-active.png" />
      <img v-else src="~/assets/images/desktop/common/menu/tipps-button.png" />
      <Spot />
    </NuxtLink>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute()
const active = computed(() => route.path.split('/')[1])
</script>
