Сделала HeaderChargePerson

src/components/HeaderChargePerson.vue

@@ -0,0 +1,88 @@
+<template lang="pug">
+  .change-person-wrapper(:class="openOptions")
+    .header.flex.items-center.pl-1.pr-2
+      img.img-wrapper.mr-1(:src="info.avatarSrc" alt="Charge person avatar")
+      span.font-bold.text-sm.mr-6px {{ info.name }}
+      .dot.mr-4
+      .icon-wrapper.icon-down-arrow.flex.items-center.justify-center.text-xxs(@click="changeState")
+    .options.flex.flex-col.p-4.mt-1.font-medium.text-sm.gap-y-3(v-if="isOpen")
+      .flex.items-center
+        img.options-icon-wrapper.mr-2(src="@/assets/icons/white-star.svg")
+        span Снять с ведения
+      .flex.items-center
+        img.options-icon-wrapper.mr-2(src="@/assets/icons/table.svg")
+        span Перейти в таблицу
+      .flex.items-center
+        .options-icon-wrapper.flex.items-center.justify-center.icon-user-data.text-base.mr-2(src="@/assets/icons/table.svg")
+        span Данные 
+</template>
+
+<script>
+export default {
+  name: "HeaderChargePerson",
+  props: {
+    info: Object,
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
+  },
+  computed: {
+    openOptions() {
+      return {
+        "open-options": this.isOpen,
+      };
+    },
+  },
+  methods: {
+    changeState() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.change-person-wrapper
+  color: var(--default-white)
+
+.open-options
+  .header
+    border-radius: 24px 24px 4px 4px
+    color: var(-time-indicator-color)
+  .icon-wrapper
+    transform: rotate(180deg)
+
+.header
+  width: 310px
+  height: 42px
+  position: relative
+  background-color: var(--btn-blue-color)
+  border-radius: 40px
+  position: relative
+
+.img-wrapper
+  width: 34px
+  height: 34px
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+
+.dot
+  width: 6px
+  height: 6px
+  border-radius: 50%
+  background-color: var(--btn-red-color)
+
+.options
+  position: absolute
+  background-color: var(--btn-blue-color)
+  width: 100%
+  border-radius: 4px 4px 24px 24px
+
+.options-icon-wrapper
+  width: 20px
+  height: 20px
+</style>

src/components/HeaderInputs.vue

@@ -41,11 +41,11 @@ export default {
 
 .header-inputs-wrapper
   background-color: var(--default-white)
+  border-radius: 4px
+  border: 1px solid var(--border-light-grey-color)
 
 .select-container
-  border-radius: 4px 0 0 4px
-  border: 1px solid var(--border-light-grey-color)
-  border-right: none
+  border-right: 1px solid var(--border-light-grey-color)
 
 .icon-wrapper
   width: 24px
@@ -74,8 +74,6 @@ export default {
   box-shadow: var(--default-shadow)
 
 .search-input
-  border-radius: 0 4px 4px 0
-  border: 1px solid var(--border-light-grey-color)
   &::placeholder
     color: var(--font-grey-color)
 

src/components/TheHeader.vue

@@ -1,12 +1,14 @@
 <template lang="pug">
-  .header-wrapper.flex.flex-row.space-between.justify-between.box-border.py-2.px-6
-    .flex.items-center.box-border.cursor-pointer
-      img.logo-img(src="@/assets/images/logo.svg" alt="Logo")
-    .flex.flex-row
-      header-inputs.mr-10
+  .header-wrapper.flex.justify-center.box-border.py-2.px-6
+    .flex.items-center.box-border.cursor-pointer.mr-auto
+      img.logo-img.mr-16(src="@/assets/images/logo.svg" alt="Logo")
+      header-inputs
+    .charge-person-container
+      header-charge-person(:info="chargePersonInfo")
+    .flex.ml-auto
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
-      .flex.flex-row.justify-centflexer.items-center
+      .flex.justify-centflexer.items-center
         img.avatar-img.mr-2(:src="avatarSrc")
         button.header-buttons
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
@@ -14,13 +16,19 @@
 
 <script>
 import img from "@/assets/images/avatar.svg";
+import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
+import HeaderChargePerson from "./HeaderChargePerson.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs },
+  components: { HeaderInputs, HeaderChargePerson },
   data() {
     return {
       avatarSrc: img,
+      chargePersonInfo: {
+        avatarSrc: chargePersonAvatar,
+        name: "Гордеев Николай Степанович",
+      },
     };
   },
 };
@@ -55,4 +63,7 @@ export default {
 .avatar-img
   width: 32px
   height: 32px
+
+.charge-person-container
+  position: absolute
 </style>