feat: add dropdown to profile and log out

src/components/Modal/BaseModal.vue

@@ -119,6 +119,7 @@ const socials = [
   .base-modal-footer {
     padding: 1rem;
     background-color: #f8f8f8;
+    color: black;
     display: flex;
     justify-content: center;
     align-items: center;

src/components/Modal/EditProfileModal.vue

@@ -33,7 +33,7 @@
           <base-button
               v-if="!saveChangesDisabled"
               class="m-auto mt-3"
-              :loading="true"
+              :loading="state.isLoading"
               :disabled="saveChangesDisabled"
               action="Save Changes"
               @click="saveChanges"
@@ -127,6 +127,7 @@ const saveChanges = async () => {
 
 <style lang="scss">
 .edit-profile-modal {
+  position: absolute;
   main {
     display: flex;
     justify-content: center;

src/components/Navbar.vue

@@ -31,10 +31,7 @@
       <img src="../assets/login-icon.webp" alt="">
     </div>
   </div>
-  <edit-profile-modal
-      v-if="state.showEditProfileModal"
-      @close="state.showEditProfileModal = false"
-  ></edit-profile-modal>
+
 </template>
 
 <script setup>

src/components/Navbar/Hamburguer.vue

@@ -6,11 +6,6 @@
       <div class="bar"></div>
     </div>
     <ul class="menu" :class="{ show: state.isMenuOpen }" @click="state.isMenuOpen = false">
-      <li
-          v-if="userStore.userData.name"
-          :class="{ active: state.showEditProfileModal }"
-          @click="emit('showEditProfile')"
-      >Profile</li>
       <li
           v-for="{ title, link, isVisible, leftIcon, rightIcon } in steps"
           :key="title"
@@ -49,8 +44,7 @@ const selectItem = (link) => {
 }
 
 const state = reactive({
-	isMenuOpen: false,
-	showEditProfileModal: false
+	isMenuOpen: false
 })
 
 const toggleMenu = () => {

src/components/Profile/ProfileDropdown.vue

@@ -8,31 +8,39 @@
       <img
           :src="userData.picture"
           alt="img-profile"
-
       >
-      <i class="fa fa-th-large"></i>
+      <i class="fa fa-caret-down"></i>
     </div>
 
     <div class="profile-menu" v-if="showMenu">
       <ul>
-        <li>Profile</li>
+        <li @click="showEditProfile = true">Profile</li>
         <li>Settings</li>
-        <li>Log out</li>
+        <li @click="userStore.logout()">Log out</li>
       </ul>
     </div>
   </div>
+  <EditProfileModal
+      v-if="showEditProfile"
+      @close="showEditProfile = false"
+  />
 </template>
 
 <script setup lang="ts">
 import { NormalUser } from '../../typing/User'
 import { ref } from 'vue'
+import { useUserStore } from '../../store/useUserStore'
+import EditProfileModal from '../Modal/EditProfileModal.vue'
+
+const userStore = useUserStore()
 
 interface Props {
   userData: NormalUser
 }
 defineProps<Props>()
 
 const showMenu = ref(false)
+const showEditProfile = ref(false)
 </script>
 
 <style lang="scss">
@@ -55,29 +63,38 @@ const showMenu = ref(false)
   }
 
   .profile-image {
+    position: relative;
     cursor: pointer;
 
     i {
       width: 2em;
-      height: 2em;
+      height: 1em;
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
-      right: 7%;
-      bottom: 20%;
-      background-color: rgba(0, 0, 0, 0.28);
+      right: 30%;
+      bottom: -5%;
+      background-color: gray;
+      z-index: 1;
     }
 
     img {
       width: 70px;
       height: 70px;
       border-radius: 50%;
+    }
 
-      @media (max-width: 500px) {
+    @media (max-width: 500px) {
+      img {
         width: 50px;
         height: 50px;
       }
+
+      i {
+        right: 20%;
+        bottom: -15%;
+      }
     }
 
   }
@@ -88,7 +105,7 @@ const showMenu = ref(false)
     background-color: rgba(255, 255, 255, 0.95);
     color: black;
     position: absolute;
-    top: 80%;
+    top: 115%;
     left: 0;
 
     ul {