add mobile burger-menu

src/components/ProfileHeader/ProfileHeader.jsx

@@ -4,22 +4,82 @@ import { NavLink, useNavigate } from "react-router-dom";
 
 import { auth, getProfileInfo, setProfileInfo } from "@redux/outstaffingSlice";
 
+import { urlForLocal } from "@utils/helper";
+
 import { apiRequest } from "@api/request";
 
 import { Loader } from "@components/Common/Loader/Loader";
 
+import avatarMok from "assets/images/avatarMok.png";
+
 import "./profileHeader.scss";
 
 export const ProfileHeader = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const profileInfo = useSelector(getProfileInfo);
+  const currentPath = window.location.pathname;
   const [user] = useState(
     localStorage.getItem("role_status") === "18" ? "partner" : "developer"
   );
 
   const [isLoggingOut, setIsLoggingOut] = useState(false);
 
+  const [navInfo] = useState({
+    developer: [
+      {
+        path: "/summary",
+        name: "Резюме"
+      },
+      {
+        path: "/calendar",
+        name: "Отчеты"
+      },
+      {
+        path: "/tracker",
+        name: "Трекер"
+      },
+      {
+        path: "/payouts",
+        name: "Выплаты"
+      },
+      {
+        path: "/quiz",
+        name: "Тесты"
+      },
+      {
+        path: "/settings",
+        name: "Настройки"
+      }
+    ],
+    partner: [
+      {
+        path: "/catalog",
+        name: "Каталог"
+      },
+      {
+        path: "/requests",
+        name: "Запросы"
+      },
+      {
+        path: "/employees",
+        name: "Персонал"
+      },
+      {
+        path: "/tracker",
+        name: "Трекер"
+      },
+      {
+        path: "/treaties",
+        name: "Договоры"
+      },
+      {
+        path: "/settings",
+        name: "Настройки"
+      }
+    ]
+  });
+
   useEffect(() => {
     if (!Object.keys(profileInfo).length)
       apiRequest(`/user/me`).then((profileInfo) => {
@@ -40,21 +100,85 @@ export const ProfileHeader = () => {
     dispatch(setProfileInfo({}));
   };
 
+  const [active, setActive] = useState(false);
+
+  const toggleBar = () => {
+    if (active) {
+      setActive(false);
+    } else {
+      setActive(true);
+    }
+  };
+
   return (
     <header className="profile-header">
-      <div className="profile-header__head">
+      <div className="auth-title">
-        <div className="profile-header__container">
+        <div className="text">
           <NavLink to={"/profile"} className="profile-header__title">
             itguild.
             <span>
               {user === "developer" ? "для разработчиков" : "для партнеров"}
             </span>
           </NavLink>
+
           <button onClick={handler} className="profile-header__logout">
             {isLoggingOut ? <Loader /> : "Выйти"}
           </button>
+
+          <div className="burger" onClick={() => toggleBar()}>
+            <div
+              className={active ? "burger__line  l1 change" : "burger__line"}
+            ></div>
+            <div
+              className={active ? "burger__line  l2 change" : "burger__line"}
+            ></div>
+            <div
+              className={active ? "burger__line  l3 change" : "burger__line"}
+            ></div>
           </div>
         </div>
+      </div>
+
+      <div className={active ? "auth-body active" : "auth-body"}>
+        {/* <div className="auth-body__title">
+          <img src={ITguild}></img>
+        </div> */}
+        <nav className="auth-body__navigation">
+          <div className="profile-header__personal-info">
+            <h3 className="profile-header__personal-info-name">
+              {profileInfo?.fio ? profileInfo?.fio : profileInfo?.username}
+            </h3>
+            <NavLink end to={"/profile"}>
+              <img
+                src={
+                  profileInfo?.photo
+                    ? urlForLocal(profileInfo.photo)
+                    : avatarMok
+                }
+                className="profile-header__personal-info-avatar"
+                alt="avatar"
+              />
+            </NavLink>
+          </div>
+
+          {navInfo[user].map((link, index) => {
+            return (
+              <NavLink
+                key={index}
+                end
+                to={link.path === "/Quiz" ? link.path : `/profile${link.path}`}
+                className={currentPath.includes(link.path) ? "active" : ""}
+              >
+                {link.name}
+              </NavLink>
+            );
+          })}
+
+          <button onClick={handler} className="profile-header__logout-burger">
+            {isLoggingOut ? <Loader /> : "Выйти"}
+          </button>
+        </nav>
+      </div>
     </header>
   );
 };

src/components/ProfileHeader/profileHeader.scss

@@ -1,13 +1,136 @@
 .profile-header {
   width: 100%;
-  display: flex;
+  height: 80px;
-  flex-direction: column;
+  background: #e1fccf;
-  font-family: "LabGrotesque", sans-serif;
+  padding: 20px;
 
   &__head {
     background: #e1fccf;
   }
 
+  .auth-title {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    z-index: 9999;
+
+    .text {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      .burger {
+        display: none;
+        cursor: pointer;
+
+        @media (max-width: 414px) {
+          display: block;
+        }
+
+        &__line {
+          width: 32px;
+          border-radius: 33px;
+          height: 5px;
+          background-color: #333;
+          margin: 5px 0 0 27px;
+          transition: 0.4s;
+        }
+
+        .l1.change {
+          transform: rotate(-45deg) translate(-7px, 6px);
+        }
+        .l2.change {
+          opacity: 0;
+        }
+        .l3.change {
+          transform: rotate(45deg) translate(-8px, -8px);
+        }
+      }
+    }
+  }
+
+  .auth-body {
+    opacity: 0;
+    z-index: 99;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    background: #e1fccf;
+    transition: 0.3s;
+
+    // @media (max-width: 414px) {
+    //   display: block;
+    // }
+
+    &__title {
+      display: flex;
+      margin-top: 24px;
+
+      img {
+        width: 160px;
+      }
+    }
+
+    &__navigation {
+      margin-top: 28px;
+      padding: 0;
+      list-style: none;
+      font-size: 14px;
+      line-height: 20px;
+      display: flex;
+      flex-direction: column;
+
+      a {
+        padding: 10px 0 0 0;
+      }
+
+      a,
+      a:hover,
+      a:active {
+        color: #000000;
+      }
+    }
+
+    &__politic {
+      margin-top: 42px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #000000;
+    }
+
+    &__contacts {
+      margin-top: 127px;
+      color: #000000;
+      h4 {
+        font-size: 20px;
+        line-height: 33px;
+      }
+      p {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .auth-body.active {
+    padding: 40px 10px;
+    opacity: 1;
+    display: flex;
+    overflow: visible;
+    width: calc(100vw / 3);
+    transition: width 0.3s;
+    height: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   &__container {
     max-width: 1160px;
     padding: 0 15px;
@@ -16,6 +139,10 @@
     justify-content: space-between;
     align-items: center;
     min-height: 50px;
+
+    @media (max-width: 414px) {
+      display: none;
+    }
   }
 
   &__title {
@@ -42,10 +169,19 @@
     font-size: 16px;
     line-height: 32px;
     color: #000000;
+
+    @media (max-width: 414px) {
+      display: none;
+    }
   }
 
-  &__info {
+  &__logout-burger {
-    background: #ffffff;
+    background: none;
+    border: none;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    color: #000000;
   }
 
   &__nav {
@@ -69,6 +205,7 @@
 
     a.active {
       color: #000000;
+      padding: 0;
     }
 
     @media (max-width: 800px) {
@@ -87,7 +224,10 @@
   &__personal-info {
     display: flex;
     column-gap: 20px;
+    flex-direction: row-reverse;
     align-items: center;
+    justify-content: flex-end;
+    padding: 10px;
 
     &-name {
       margin-bottom: 0;
@@ -103,6 +243,10 @@
       }
     }
 
+    a.active {
+      padding: 0;
+    }
+
     &-avatar {
       width: 37px;
       height: 37px;

src/components/SideBar/sidebar.scss

@@ -16,9 +16,8 @@
   @media (max-width: 1440px) {
     width: 80px;
   }
-}
 
-.auth-title {
+  .auth-title {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -105,9 +104,9 @@
         }
       }
     }
-}
+  }
 
-.auth-body {
+  .auth-body {
     padding: 40px 10px;
     visibility: hidden;
     transition: 0.2s ease-in-out;
@@ -177,9 +176,9 @@
         margin: 50px 0 25px 0;
       }
     }
-}
+  }
 
-.auth-body.active {
+  .auth-body.active {
     visibility: visible;
     transition: 0.1s ease-in-out;
     opacity: 1;
@@ -196,4 +195,5 @@
       width: 100%;
       height: 705px;
     }
+  }
 }