<template>
  <div class="menu-wrapper">
    <ul class="menu">
      <li class="menu-item">
        <p>Chat</p>
        <a>
          <img draggable="false" src="/assets/icons/chat.png" />
        </a>
      </li>
      <li class="menu-item">
        <p>World</p>
        <a>
          <img draggable="false" src="/assets/icons/world.png" />
        </a>
      </li>
      <li class="menu-item">
        <p>Users</p>
        <a>
          <img draggable="false" src="/assets/icons/users.png" />
        </a>
      </li>
      <li class="menu-item">
        <p>Inventory</p>
        <a>
          <img draggable="false" src="/assets/icons/treasure-chest.png" />
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
@import '@/assets/scss/main';

.menu-wrapper {
  .menu {
    list-style: none;
    display: flex;
    gap: 20px;

    .menu-item {
      position: relative;

      p {
        position: absolute;
        bottom: 50px;
        width: 64px;
        text-align: center;
        background-color: #b1b2b5;
        border: 2px solid $white;
        border-radius: 24px;
        height: 24px;
        font-size: 0.875rem;
        line-height: 24px;
        left: 50%;
        transform: translateX(-50%);
        display: none;

        &::after {
          content: '';
          position: absolute;
          top: 100%;
          background-color: $white;
          height: 8px;
          width: 14px;
          clip-path: polygon(100% 0, 0 0, 50% 100%);
          left: 50%;
          transform: translateX(-50%);
        }
      }

      a {
        padding: 8px;
        background-color: rgba(127, 127, 127, 0.7);
        border: 2px solid $white;
        border-radius: 50%;
        display: block;
        width: 30px;
        height: 30px;

        img {
          width: inherit;
          height: inherit;
        }
      }

      &:hover {
        p {
          display: block;
        }

        a {
          background-image: url('/assets/galaxy.png');
          background-position: center;
          background-size: cover;

          img {
            filter: drop-shadow(0px 3px 6px $black);
          }
        }
      }
    }
  }
}
</style>
