<script setup>
import {useUi} from "@/pinia/ui";

const emits = defineEmits(["callback"]);
const ui = useUi();
</script>

<template>
  <div class="nav-menu" id="menu-dropdown">
    <div v-for="(item, key) in ui.currentMenu" :key class="item" @click="emits('callback', item)">
      {{ item?.name }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav-menu {
  width: 250px;
  height: var(--navmenu-height);

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  background: white;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;

  animation: fade .2s ease-in-out forwards;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

.item {
  padding: .5em 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-align: left;
  cursor: pointer;

  transition: var(--duration);

  &:hover {
    color: white;
    background: var(--primary);
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    height: 0
  }
  100% {
    opacity: 1;
    height: var(--navmenu-height);
  }
}
</style>