Переписываю спорные решения

src/components/ProfileHeader/ProfileHeader.js

@@ -0,0 +1,71 @@
+import React, {useEffect, useState} from 'react';
+import {useNavigate, NavLink} from "react-router-dom";
+import {useDispatch, useSelector} from "react-redux";
+
+import {Loader} from '../Loader/Loader'
+
+import {auth, getProfileInfo, setProfileInfo} from "../../redux/outstaffingSlice";
+import {getRole} from "../../redux/roleSlice";
+
+
+
+import './profileHeader.scss'
+import {useRequest} from "../../hooks/useRequest";
+
+
+export const ProfileHeader = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+  const {apiRequest} = useRequest();
+
+  const userRole = useSelector(getRole);
+  const profileInfo = useSelector(getProfileInfo);
+
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  useEffect(() => {
+    apiRequest(`/api/profile/${localStorage.getItem('cardId')}`)
+        .then((profileInfo) =>
+            dispatch(setProfileInfo(profileInfo))
+        );
+
+  }, [dispatch]);
+
+  const handler = () => {
+    setIsLoggingOut(true);
+    localStorage.clear();
+    dispatch(auth(false));
+    setIsLoggingOut(false);
+    navigate(userRole === 'ROLE_DEV' ? '/authdev' : '/auth')
+  };
+
+  return (
+      <header className='profileHeader'>
+        <div className='profileHeader__head'>
+          <div className='profileHeader__container'>
+            <h2 className='profileHeader__title'>itguild.<span>для разработчиков</span></h2>
+            <button onClick={handler} className='profileHeader__logout'>
+              {isLoggingOut ? <Loader/> : 'Выйти'}
+            </button>
+          </div>
+        </div>
+        <div className='profileHeader__info'>
+          <div className='profileHeader__container'>
+            <nav className='profileHeader__nav'>
+              <NavLink to={'/summary'}>Резюме</NavLink>
+              <NavLink to={'/profile'}>Отчетность</NavLink>
+              <NavLink to={'/profile'}>Трекер</NavLink>
+              <NavLink to={'/profile'}>Выплаты</NavLink>
+              <NavLink to={'/profile'}>Настройки</NavLink>
+            </nav>
+
+            <div className='profileHeader__personalInfo'>
+              <h3 className='profileHeader__personalInfoName'>{profileInfo.fio}</h3>
+              <img src={profileInfo.photo} className='profileHeader__personalInfoAvatar' alt='avatar'/>
+            </div>
+          </div>
+        </div>
+      </header>
+  )
+};

src/components/ProfileHeader/profileHeader.scss

@@ -0,0 +1,96 @@
+.profileHeader {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: 'LabGrotesque', sans-serif;
+
+  &__head {
+    background: #E1FCCF;
+  }
+
+  &__container {
+    max-width: 1160px;
+    padding: 0 10px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 50px;
+  }
+
+  &__title {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 32px;
+    margin-bottom: 0;
+
+    span {
+      color: #52B709;
+    }
+  }
+
+  &__logout {
+    background: none;
+    border: none;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 32px;
+    color: #000000;
+  }
+
+  &__info {
+    background: #FFFFFF;
+  }
+
+  &__nav {
+    display: flex;
+    column-gap: 30px;
+
+    .active {
+      color: #000000 !important;
+    }
+
+    a {
+      text-decoration: none;
+      cursor: pointer;
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 32px;
+      color: #807777 !important;
+    }
+
+    @media (max-width: 800px) {
+      column-gap: 15px;
+
+      a {
+        font-size: 12px;
+      }
+    }
+  }
+
+  &__personalInfo {
+    display: flex;
+    column-gap: 20px;
+    align-items: center;
+
+    &Name {
+      margin-bottom: 0;
+      font-size: 12px;
+      line-height: 32px;
+      max-width: 150px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      @media (max-width: 600px) {
+        display: none;
+      }
+    }
+
+    &Avatar {
+      width: 37px;
+      height: 37px;
+      border-radius: 100px;
+    }
+  }
+}