<script setup lang="ts">
import { ref } from 'vue'
import { motion } from 'motion-v'

const items = [
  { label: "Home", number: 1 },
  { label: "Photos", number: 2 },
  { label: "Contact", number: 3 }
]
const isHovered = ref<number | null>(null)
</script>

<template>
  <ul class="list">
    <motion.li
      v-for="{ label, number } in items"
      :key="number"
      class="item"
      :style="{
        justifyContent: isHovered === number ? 'flex-end' : 'flex-start'
      }"
      @hoverStart="isHovered = number"
      @hoverEnd="isHovered = null"
    >
      <motion.span layout class="text">
        <span class="number-label">0{{ number }}</span>
        {{ label }}
      </motion.span>
      <motion.span layout class="text" aria-hidden="true">
        <span class="number-label">0{{ number }}</span>
        {{ label }}
      </motion.span>
    </motion.li>
  </ul>
</template>

<style>
/**
 * ==============   Styles   ================
 */
.list {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 32px;
}

.text {
  color: #f5f5f5;
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 32px;
}

.number-label {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}
</style>