WIP Поправила меню и формы

src/components/TheHeader.vue

@@ -41,7 +41,7 @@
         base-avatar.mr-2(:size="32", v-else)
           img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
         q-btn(
-          @click="openPopup",
+          @click="openPopup"
           flat
           icon="app:icon-down-arrow",
           style="color: var(--font-dark-blue-color)",
@@ -49,13 +49,9 @@
           padding="4px 2px 2px 2px"
           dense,
         )
-        base-popup.right-2.top-10(
-          corner,
-          v-if="showPopup",
-          :width="160",
-          v-click-outside="openPopup"
-        )
-          .text-popup.flex.cursor-pointer.pl-2(@click="logout") Выйти
+          q-menu(style="margin-top: 19px !important")
+            .menu.p-4
+              .text-popup.flex.cursor-pointer.pl-2(@click="logout", v-close-popup) Выйти
 </template>
 
 <script>
@@ -121,25 +117,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.form-enter-from
-  opacity: 0
-  transform: translateY(300px)
-  pointer-events: none
-
-.form-enter-active
-  transition: 0.5s ease
-
-.form-leave-to
-  opacity: 0
-  transform: translateY(300px)
-  pointer-events: none
-
-.form-leave-active
-  transition: 0.5s ease
-
-.form-move
-  transition: 0.5s ease
-
 .header-buttons
   outline: none
   border: none
@@ -173,4 +150,15 @@ export default {
   color: var(--btn-blue-color)
   &:hover
     opacity: 0.8
+
+.menu
+  width: 160px
+  max-width: 160px !important
+  border-radius: 4px
+  background-color: var(--default-white)
+</style>
+
+<style lang="sass">
+.q-menu
+  z-index: 40 !important
 </style>