<template>
  <ul class="list-none flex gap-2.5 items-center">
    <li class="menu-item relative">
      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Chat</p>
        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
      </div>
      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/chat.png" />
      </a>
    </li>
    <li class="menu-item relative">
      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">World</p>
        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
      </div>
      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/world.png" />
      </a>
    </li>
    <li class="menu-item relative">
      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Users</p>
        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
      </div>
      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/users.png" />
      </a>
    </li>
    <li class="menu-item relative">
      <div class="absolute bottom-[65px] left-1/2 translate-x-[-50%] w-[85px] h-[24px] text-center bg-gray-300 border-2 border-solid border-cyan rounded-3xl hidden">
        <p class="absolute w-full bottom-0 m-0 text-sm leading-6">Inventory</p>
        <div class="absolute top-[26px] bg-white h-[8px] w-[14px] [clip-path:polygon(100%_0,_0_0,_50%_100%)] left-1/2 translate-x-[-50%] hidden"></div>
      </div>
      <a class="p-2 bg-gray-300 bg-opacity-70 border-2 border-solid border-cyan rounded-lg block w-[45px] h-[35px]">
        <img class="w-[45px] h-[35px] object-contain" draggable="false" src="/assets/icons/treasure-chest.png" />
      </a>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.menu-item:hover {
  div {
    @apply block;
  }

  a {
    @apply bg-gray bg-opacity-70 cursor-pointer;

    img {
      @apply drop-shadow-default;
    }
  }
}
</style>
