store-project/src/views/layout/components/Menu.vue

<template>
  <div class="flex flex-col items-center">
    <div
      class="rounded-[20px] flex items-center justify-center w-[75px] h-[75px]"
      :class="[props.info.slected ? 'active' : '']"
    >
      <img :src="props.info?.img" class="w-[70px] h-[70px]" />
    </div>
    <div
      class="text-[16px] text-center text-[16px] w-[75px]"
      :class="[props.info.slected ? 'font-semibold' : '']"
    >
      {{ info.name }}
    </div>
  </div>
</template>
<script setup>
import { watch } from 'vue'
import router from '../../../router'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const props = defineProps({
  info: { type: Object, required: true },
})
watch(
  () => props,
  () => {
    if (props.info.slected) {
      router.push(props.info.path)
    }
  },
  { deep: true },
)
const changeLanguage = (lang) => {
  locale.value = lang
}
</script>
<style scoped>
.active {
  border-radius: 19.296px;
  background: #f67f20;
  box-shadow: 0px 12.864px 38.593px 0px rgba(234, 124, 105, 0.32);
}
</style>