factored out settings from messageView

src/components/messageItem.vue

@@ -80,7 +80,7 @@
   },
 
   setup(props) {
-    let isPlaying = ref(false);
+    const isPlaying = ref(false);
 
     const onStopPlayback = (e: any) => {
       window.ipcRenderer.removeAllListeners("stop-playback-anim");

src/components/settings.vue

@@ -0,0 +1,151 @@
+<template>
+    
+  <!-- Settings icon. -->
+  <button 
+    class="settingsIcon" 
+    v-if="toggleSettings == false"
+    @click="onActive"
+  >
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+    <div class="settingsButtonDot"></div>
+  </button>
+
+  <!-- Settings div. -->
+  <div id="settings" v-show="toggleSettings">
+    <button 
+      class="settingsOption"
+      @click="onLogout"
+    >
+      Logout
+    </button>
+  </div>
+
+</template>
+
+<script lang="ts">
+
+  import { defineComponent, ref } from "vue";
+  import { useAuth } from "@/modules/auth";
+  import  { useIpc } from "@/modules/ipc";
+  import { useRouter } from "vue-router";
+
+
+  export default defineComponent({
+    name: "Settings",
+
+    setup() {
+      let toggleSettings = ref(false);
+
+      const { post } = useIpc();
+      const { logout } = useAuth();
+      const router = useRouter();
+
+
+      // When settings is showing.
+      const onActive = () => {
+        toggleSettings.value = true;
+        window.addEventListener("keydown", onEscape);
+      }
+
+      // 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 logout button in settings.
+      const onLogout = () => {
+        logout();
+        router.push({ name: "login" });
+        post("logout", "")
+      } 
+
+      return {
+        onActive, 
+        toggleSettings,
+        onLogout
+      }
+    }   
+  })
+
+</script>
+
+<style lang="scss" scoped>
+
+#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: #9B9B9B;
+}
+
+.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>
+