refactor & debug burger-menu, add participant

add column and deploying a task

src/components/ProfileHeader/ProfileHeader.jsx

@@ -110,6 +110,10 @@ export const ProfileHeader = () => {
     }
   };
 
+  const closeMenu = () => {
+    setActive(false);
+  };
+
   return (
     <header className="profile-header">
       <div className="auth-title">
@@ -179,6 +183,7 @@ export const ProfileHeader = () => {
           </button>
         </nav>
       </div>
+      {active && <div className="backdrop" onClick={closeMenu}></div>}
     </header>
   );
 };

src/components/ProfileHeader/profileHeader.scss

@@ -17,7 +17,6 @@
     justify-content: space-between;
     align-items: center;
     height: 100%;
-    z-index: 9;
     max-width: 1160px;
     width: 100%;
     margin: 0 auto;
@@ -36,6 +35,7 @@
 
         @media (max-width: 414px) {
           display: block;
+          z-index: 9;
         }
 
         &__line {
@@ -64,9 +64,19 @@
     background: white;
   }
 
+  .backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 7;
+  }
+
   .auth-body {
     opacity: 0;
-    z-index: 99;
+    z-index: 8;
     position: absolute;
     top: 0;
     right: 0;
@@ -99,7 +109,7 @@
       flex-direction: column;
 
       a {
-        padding: 10px 0 0 0;
+        padding: 15px 0 0 10px;
       }
 
       a,
@@ -134,7 +144,7 @@
     opacity: 1;
     display: flex;
     overflow: visible;
-    width: calc(100vw / 3);
+    width: calc(100vw / 2.5);
     transition: width 0.3s;
     height: 100%;
     flex-direction: column;
@@ -188,6 +198,7 @@
   &__logout-burger {
     background: none;
     border: none;
+    padding: 15px 0 0 0;
     font-weight: 500;
     font-size: 16px;
     line-height: 32px;