ktc-reborn/components/NavBar.vue

<template>
  <nav class="relative w-full h-20 flex items-end animate__animated animate__fadeInUp animate__faster">
    <div class="w-full rounded-t-xl bg-stone-800 h-14"></div>
    <div
      class="top-0 left-0 absolute w-full h-full grid grid-cols-3 grid-rows-1 items-end"
    >
      <div
        v-for="(item, idx) in items"
        :key="idx"
        class="h-full flex justify-center items-end text-center"
      >
        <div
          @click="selectedIdx = idx"
          class="flex flex-col items-center justify-center bg-stone-800 px-4 cursor-pointer duration-300"
          :class="{
            'h-20 rounded-t-full': idx === selectedIdx,
            'h-14': idx !== selectedIdx,
          }"
        >
          <Icon :name="item.icon" class="w-10 h-10 duration-300" />
          <p :class="selectedIdx === idx ? 'opacity-100 mt-1 text-sm' : 'opacity-0 text-[0px] mt-0'" class="duration-300" v-text="item.name" />
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
const items = ref([
  {
    name: "Новости",
    icon: "hugeicons:news",
  },
  {
    name: "Расписание",
    icon: "mdi:timetable",
  },
  {
    name: "Профиль",
    icon: "ph:student-bold",
  },
]);

const selectedIdx = ref(0);
</script>