Productos view

src/components/app/NavMenu.vue

@@ -0,0 +1,54 @@
+<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;
+}
+
+.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>