rearranging

src/components/inputItem/inputItem.vue

@@ -13,7 +13,7 @@
     </span>
 
     <!-- Show text input on key-down -->
-    <input id="textInput" type="text" />
+    <TextInput />
 
   </div>
 </template>
@@ -23,9 +23,13 @@
 import { defineComponent } from "vue";
 import draggify from "@/modules/draggify";
 import useInputController from "./inputController";
+import TextInput from "@/components/inputItem/textInput.vue"
 
 export default defineComponent({
   name: "InputItem",
+  components: {
+    TextInput
+  },
   setup() {
 
     // Calculate position of inputItem on drag.

src/components/inputItem/menu.vue

@@ -0,0 +1,70 @@
+<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>

src/components/inputItem/menuController.ts

@@ -0,0 +1,22 @@
+
+
+
+
+export default function useMenu() {
+
+    const submitSuggestion = (suggestion: string) => {
+        console.log(`Submit...${suggestion}`)
+
+        // // Render the message immediately and get its unique id.
+        // const uid = render(suggestion, false, "", "sf");
+
+        // // Then send it to the backend for processing.
+        // const clientM = clientMessage(suggestion, false, uid);
+        // post('client-message', clientM);
+    }
+
+    return {
+        submitSuggestion
+    }
+    
+}

src/components/inputItem/textInput.vue

@@ -0,0 +1,59 @@
+<template>
+
+  <div
+    class="text-input"
+  >
+    <input
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "TextInput",
+
+  props: {
+
+    // Where is avatar?
+    left: Boolean
+
+  },
+
+  setup(props) {
+
+    return {
+
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+
+.text-input {
+  position: absolute;
+
+  min-width: 150px;
+  height: 36px;
+
+  border-radius: 18px;
+
+  outline: none;
+  border: none;
+  pointer-events: none;
+
+  background-color: white;
+
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
+}
+
+// Activate if we need 
+.text-input-left {
+
+  left: -200px;
+  background-color: red;
+
+}
+</style>