<template>
  <div v-frame-hm="97" v-frame-wm="393" v-frame-xm="0" v-frame-ym="790" class="nav-bar" :class="{ hidden: hideMenu }">
    <img src="~/assets/images/mobile/common/nav-bar/frame.png" />

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="8" v-y:97="0" to="/mobile">
      <img v-if="active === ''" src="~/assets/images/mobile/common/nav-bar/uebersicht-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="85" v-y:97="0" to="/mobile/postfach">
      <img v-if="active === 'postfach'" src="~/assets/images/mobile/common/nav-bar/postfach-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="162" v-y:97="0" to="/mobile/vertraege">
      <img v-if="active === 'vertraege'" src="~/assets/images/mobile/common/nav-bar/vertraege-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="239" v-y:97="0" to="/mobile/services">
      <img v-if="active === 'services'" src="~/assets/images/mobile/common/nav-bar/services-active.png" />
      <Spot />
    </NuxtLink>

    <NuxtLink v-h:97="80" v-w:393="69" v-x:393="316" v-y:97="0" to="/mobile/tipps">
      <img v-if="active === 'tipps'" src="~/assets/images/mobile/common/nav-bar/tipps-active.png" />
      <Spot />
    </NuxtLink>
  </div>
</template>

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

<style scoped>
.nav-bar {
  transition: transform 0.3s ease;
}

.nav-bar,
:deep(img) {
  position: absolute;
}

.hidden {
  transform: translateY(100%);
}
</style>
