70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<div id="menu">
|
|
<ul id="menu-list">
|
|
<li
|
|
v-for="suggestion in menuItems.values()"
|
|
@click="submitSuggestion(suggestion)"
|
|
>
|
|
{{ suggestion }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from "vue";
|
|
import useMenu from "./menuController";
|
|
|
|
export default defineComponent({
|
|
name: "SuggestionsMenu",
|
|
|
|
setup() {
|
|
const menuItems = ref(new Map())
|
|
// menuItems.value.set(0, 'add contact')
|
|
// menuItems.value.set(1, 'delete contact')
|
|
// menuItems.value.set(2, 'show contacts')
|
|
// menuItems.value.set(3, 'send a message')
|
|
|
|
const { submitSuggestion } = useMenu();
|
|
|
|
return {
|
|
menuItems,
|
|
submitSuggestion
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#menu {
|
|
margin-top: 20px;
|
|
min-width: 200px;
|
|
height: 200px;
|
|
background-color: white;
|
|
border-radius: 18px;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
animation-name: menu-appear;
|
|
animation-duration: 1s;
|
|
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
#menu-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
@keyframes menu-appear {
|
|
from {
|
|
height: 0px;
|
|
}
|
|
to {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|