client/src/components/ContentDrawer.tsx

@@ -11,7 +11,7 @@ interface ContentDrawerProps {
   type: 'create' | 'edit';
   login?: string;
   name?: string;
-  email?: string;
+  email?: string | null;
 }
 
 export default function ContentDrawer({

client/src/components/Header.tsx

@@ -1,6 +1,9 @@
 import { useUserSelector } from '@/store/userStore';
 import { Avatar } from 'antd';
 import Title from 'antd/es/typography/Title';
+import { useState } from 'react';
+import ContentDrawer from './ContentDrawer';
+import UserEdit from './UserEdit';
 
 interface HeaderProps {
   title: string;
@@ -8,6 +11,12 @@ interface HeaderProps {
 }
 
 export default function Header({ title, additionalContent }: HeaderProps) {
+  const [openEdit, setOpenEdit] = useState(false);
+
+  const showEditDrawer = () => setOpenEdit(true);
+  const closeEditDrawer = () => {
+    setOpenEdit(false);
+  };
   const user = useUserSelector();
   return (
     <div
@@ -45,6 +54,7 @@ export default function Header({ title, additionalContent }: HeaderProps) {
             alignItems: 'center',
             justifyContent: 'center',
           }}
+          onClick={showEditDrawer}
         >
           <Avatar
             size={25.77}
@@ -52,6 +62,16 @@ export default function Header({ title, additionalContent }: HeaderProps) {
           />
         </div>
       </div>
+      <ContentDrawer
+        login={user?.login}
+        name={user?.name}
+        email={user?.email}
+        open={openEdit}
+        closeDrawer={closeEditDrawer}
+        type="edit"
+      >
+        {user?.id && <UserEdit userId={user?.id} />}
+      </ContentDrawer>
     </div>
   );
 }