settings/logout button

src/App.vue

@@ -1,14 +1,18 @@
 <template>
   <div id="app" v-if="ready">
 
-    <button class="titlebar">
+    <button class="titlebar" />
 
-    </button>
-
-        <!-- Menu -->
+    <!-- Minimize and exit buttons. -->
     <span class="menu">
-      <button class="menuButton exitButton" @click.prevent="callNavbar('close')"></button>
-      <button class="menuButton minimizeButton" @click.prevent="callNavbar('min')"></button>
+      <button 
+        class="menuButton exitButton" 
+        @click.prevent="callNavbar('close')" 
+      />
+      <button 
+        class="menuButton minimizeButton" 
+        @click.prevent="callNavbar('min')" 
+      />
     </span>
 
     <!-- Windows -->

src/components/inputItem/inputController.ts

@@ -74,6 +74,7 @@ export default function useInputController() {
         // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
         // See the arrary "keyboardNameMap" module for possible keys.
         const cmd = keyboardNameMap[e.keyCode];
+        
         switch (cmd) {
           case "ENTER":
             onEnter();
@@ -88,7 +89,7 @@ export default function useInputController() {
           default:
             input.value += ch;
         }
-        
+
     }
 
     // stop stream recording and render audio message on space key up event.

src/components/inputItem/inputItem.vue

@@ -76,7 +76,7 @@ export default defineComponent({
 .rec-icon {
   width: 8px;
   height: 8px;
-  border-radius: 4px;
+  border-radius: 50%;
   background-color: red;
   transform: translate(14px);
 
@@ -106,7 +106,7 @@ export default defineComponent({
 
   border-radius: 18px;
 
-  z-index: 20;
+  z-index: 3;
 
   background-color: white;
 

src/views/messenger.vue

@@ -1,14 +1,31 @@
 <template>
   <InputItem />
 
+  <!-- Settings open button. -->
+  <button 
+    class="settingsIcon" 
+    v-if="toggleSettings == false"
+    @click="onSettings"
+  >
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+  </button>
+
+  <!-- Settings "page." -->
+  <div id="settings" v-show="toggleSettings">
+    <button class="settingsOption">Logout</button>
+  </div>
+
   <!-- List of message bubbles. -->
   <div id="messenger">
     <MessageItem v-for="message in messages" :message="message[1]" :key="message[0]" />
   </div>
+
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
+import { defineComponent, reactive, ref, onMounted, onUnmounted } from "vue";
 import { RenderMessage , Annotation } from "@/types/message/index";
 import MessageItem from "@/components/messageItem.vue";
 import InputItem from "@/components/inputItem/inputItem.vue";
@@ -23,7 +40,27 @@ export default defineComponent({
   },
 
   setup() {
+
+    // Whether or not to show the settings.
+    let toggleSettings = ref(false);
+
+    // Listen for escape key to close settings.
+    const onEscape = (e: any) => {
+      if(e.key === "Escape") {
+        toggleSettings.value = false;
+      }
+      window.removeEventListener("keydown", onEscape);
+    }
+
+    // When user clicks settings button.
+    const onSettings = () => {
+      toggleSettings.value = true;
+      window.addEventListener("keydown", onEscape);
+    }
+
+
     const { emitter } = useMitt();
+
     // List of messages in the view.
     // Oldest message first.
     const messages = reactive(new Map());
@@ -50,6 +87,8 @@ export default defineComponent({
       }
     }
 
+    toggleSettings.value = false;
+
     onMounted(() => {
       emitter.on('self-message', (message) => messages.set(message.uid, message));
       // Listen for new messages to render.
@@ -62,7 +101,9 @@ export default defineComponent({
     });
 
     return {
+      toggleSettings,
       messages,
+      onSettings
     };
   },
 });
@@ -86,4 +127,76 @@ export default defineComponent({
 #messenger::-webkit-scrollbar {
   display: none;
 }
+
+#settings {
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100vw;
+  height: 100vh;
+
+  background-color: #EBEBEB;
+
+  opacity: 0.75;
+
+  z-index: 4;
+
+  animation-name: appear;
+  animation-duration: 0.5s;
+}
+
+@keyframes appear {
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 0.75
+  }
+}
+
+.settingsIcon {
+  position: fixed;
+  right: 0;
+
+  border: none;
+  outline: none;
+
+  display: flex;
+  flex-direction: row;
+
+  margin-right: 20px;
+  margin-top: 24px;
+
+  z-index: 2;
+  background-color: #EBEBEB;
+}
+
+.settingsButtonDot {
+  width: 5px;
+  height: 5px;
+
+  margin: 2px;
+  border-radius: 2.5px;
+  background-color: #383838;
+}
+
+.settingsOption {
+  font-family: "SF Compact Display";
+  background-color: #B7B7B7;
+  padding: 10px 30px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+  border: none;
+  outline: none;
+  text-decoration: none;
+}
+
+.settingsOption:hover {
+  cursor: pointer;
+}
 </style>