Merge branch 'main' of https://git.itguild.info/apuc/guild_front

src/App.jsx

@@ -1,60 +1,61 @@
+import "bootstrap/dist/css/bootstrap.min.css";
 import React from "react";
+import { useSelector } from "react-redux";
 import {
-  BrowserRouter as Router,
+  Navigate,
   Route,
-  Routes,
+  BrowserRouter as Router,
-  Navigate
+  Routes
 } from "react-router-dom";
 
 import { getNotification } from "@redux/outstaffingSlice";
 
-import Auth from "./pages/Auth/Auth";
+import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate";
 import CatalogSpecialists from "@pages/CatalogSpecialists/CatalogSpecialists";
-import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro";
 import { CompanyInfo } from "@pages/CompanyInfo/CompanyInfo";
-import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
+import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
-import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration";
+import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
-import Home from "./pages/Home/Home";
-import Candidate from "./components/Candidate/Candidate";
-import Calendar from "./components/Calendar/Calendar";
-import ReportForm from "./components/ReportForm/ReportForm";
-import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers";
-import { TicketFullScreen } from "@components/Modal/Tracker/TicketFullScreen/TicketFullScreen";
-import { ProfileCalendar } from "@components/ProfileCalendar/ProfileCalendar";
-import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
-import Article from "./pages/Article/Article";
-import FormPage from "./pages/FormPage/FormPage";
-import SingleReportPage from "./pages/SingleReportPage/SingleReportPage";
-import { QuizPage } from "@pages/Quiz/QuizPage";
-import { QuizReportPage } from "@pages/Quiz/QuizReportPage";
-import { Profile } from "@pages/Profile/Profile";
-import { Summary } from "@pages/Summary/Summary";
-import { ViewReport } from "@pages/ViewReport/ViewReport";
-import { Tracker } from "@pages/Tracker/Tracker";
-import { Payouts } from "@pages/Payouts/Payouts";
-import { PartnerSettings } from "@pages/PartnerSettings/PartnerSettings";
-import { PartnerRequests } from "@pages/PartnerRequests/PartnerRequests";
 import { PartnerAddRequest } from "@pages/PartnerAddRequest/PartnerAddRequest";
 import { PartnerBid } from "@pages/PartnerBid/PartnerBid";
-import { PartnerCategories } from "@pages/PartnerСategories/PartnerСategories";
-import { PartnerTreaties } from "@pages/PartnerTreaties/PartnerTreaties";
-import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
-import { AuthForCandidate } from "@pages/AuthForCandidate/AuthForCandidate";
-import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
-import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
 import { PartnerEmployeeReport } from "@pages/PartnerEmployeeReport/PartnerEmployeeReport";
-import { PassingTests } from "@pages/Quiz/PassingTests";
+import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
-import Blog from "./pages/Blog/Blog";
+import { PartnerRequests } from "@pages/PartnerRequests/PartnerRequests";
-import Statistics from "@pages/Statistics/Statistics";
+import { PartnerSettings } from "@pages/PartnerSettings/PartnerSettings";
+import { PartnerTreaties } from "@pages/PartnerTreaties/PartnerTreaties";
+import { PartnerCategories } from "@pages/PartnerСategories/PartnerСategories";
+import { Payouts } from "@pages/Payouts/Payouts";
+import { Profile } from "@pages/Profile/Profile";
+import { ProfileCandidate } from "@pages/ProfileCandidate/ProfileCandidate";
 import { ProjectTracker } from "@pages/ProjectTracker/ProjectTracker";
-import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
+import { PassingTests } from "@pages/Quiz/PassingTests";
-import { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
+import { QuizPage } from "@pages/Quiz/QuizPage";
-import Notification from "@components/Notification/Notification";
+import { QuizReportPage } from "@pages/Quiz/QuizReportPage";
-import { useSelector } from "react-redux";
+import { RegistrationForCandidate } from "@pages/RegistrationForCandidate/RegistrationForCandidate";
+import { RegistrationSetting } from "@pages/RegistrationSetting/RegistrationSetting";
+import Statistics from "@pages/Statistics/Statistics";
+import { Summary } from "@pages/Summary/Summary";
+import { Tracker } from "@pages/Tracker/Tracker";
+import { TrackerAuth } from "@pages/TrackerAuth/TrackerAuth";
+import { TrackerIntro } from "@pages/TrackerIntro/TrackerIntro";
+import { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration";
+import { ViewReport } from "@pages/ViewReport/ViewReport";
+
+import { TicketFullScreen } from "@components/Modal/Tracker/TicketFullScreen/TicketFullScreen";
+import Notification from "@components/Notification/Notification";
+import { ProfileCalendar } from "@components/ProfileCalendar/ProfileCalendar";
 
-import "./assets/global.scss";
 import "./assets/fonts/stylesheet.css";
-import "bootstrap/dist/css/bootstrap.min.css";
+import "./assets/global.scss";
+import Calendar from "./components/Calendar/Calendar";
+import Candidate from "./components/Candidate/Candidate";
+import FreeDevelopers from "./components/FreeDevelopers/FreeDevelopers";
+import ReportForm from "./components/ReportForm/ReportForm";
+import Article from "./pages/Article/Article";
+import Auth from "./pages/Auth/Auth";
+import Blog from "./pages/Blog/Blog";
+import FormPage from "./pages/FormPage/FormPage";
+import Home from "./pages/Home/Home";
+import SingleReportPage from "./pages/SingleReportPage/SingleReportPage";
 
 const App = () => {
   const notification = useSelector(getNotification);

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,5 +1,8 @@
 .profile-header {
   width: 100%;
+  height: 80px;
+  background: #e1fccf;
+  padding: 20px;
   display: flex;
   flex-direction: column;
 
@@ -7,6 +10,129 @@
     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;
@@ -15,6 +141,10 @@
     justify-content: space-between;
     align-items: center;
     min-height: 50px;
+
+    @media (max-width: 414px) {
+      display: none;
+    }
   }
 
   &__title {
@@ -41,10 +171,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 {
@@ -68,6 +207,7 @@
 
     a.active {
       color: #000000;
+      padding: 0;
     }
 
     @media (max-width: 800px) {
@@ -86,7 +226,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;
@@ -102,6 +245,10 @@
       }
     }
 
+    a.active {
+      padding: 0;
+    }
+
     &-avatar {
       width: 37px;
       height: 37px;

src/components/SideBar/sidebar.scss

@@ -16,184 +16,184 @@
   @media (max-width: 1440px) {
     width: 80px;
   }
-}
 
-.auth-title {
+  .auth-title {
-  position: relative;
+    position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  height: 80%;
-  z-index: 9999;
-
-  .text {
     display: flex;
     flex-direction: column;
-    margin: 70px 0 0 0;
+    justify-content: space-between;
-
+    align-items: center;
-    h3 {
+    height: 80%;
-      transform: rotate(270deg);
+    z-index: 9999;
-      font-size: 25px;
-      line-height: 32px;
-      text-transform: uppercase;
-      color: #222222;
-    }
-
-    .burger {
-      cursor: pointer;
-      margin-bottom: 70px;
-
-      &__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);
-      }
-    }
-  }
-
-  .outstaffing {
-    transform: rotate(270deg);
-    font-size: 18px;
-    line-height: 32px;
-    width: 200px;
-
-    img {
-      margin-right: 15px;
-    }
-  }
-
-  @media (max-width: 1375px) {
-    flex-direction: row;
-    height: 100%;
 
     .text {
-      margin: 0;
+      display: flex;
-      flex-direction: row;
+      flex-direction: column;
-
+      margin: 70px 0 0 0;
-      .burger {
-        margin-bottom: 5px;
-      }
 
       h3 {
-        display: none;
+        transform: rotate(270deg);
+        font-size: 25px;
+        line-height: 32px;
+        text-transform: uppercase;
+        color: #222222;
+      }
+
+      .burger {
+        cursor: pointer;
+        margin-bottom: 70px;
+
+        &__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);
+        }
       }
     }
 
     .outstaffing {
-      margin: 0;
+      transform: rotate(270deg);
-      width: 150px;
+      font-size: 18px;
-      font-size: 12px;
+      line-height: 32px;
-      transform: none;
+      width: 200px;
 
       img {
-        margin-right: 5px;
+        margin-right: 15px;
-        width: 15px;
+      }
+    }
+
+    @media (max-width: 1375px) {
+      flex-direction: row;
+      height: 100%;
+
+      .text {
+        margin: 0;
+        flex-direction: row;
+
+        .burger {
+          margin-bottom: 5px;
+        }
+
+        h3 {
+          display: none;
+        }
+      }
+
+      .outstaffing {
+        margin: 0;
+        width: 150px;
+        font-size: 12px;
+        transform: none;
+
+        img {
+          margin-right: 5px;
+          width: 15px;
+        }
       }
     }
   }
-}
 
-.auth-body {
+  .auth-body {
-  padding: 40px 10px;
+    padding: 40px 10px;
-  visibility: hidden;
+    visibility: hidden;
-  transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
-  opacity: 0;
+    opacity: 0;
-  z-index: 99;
+    z-index: 99;
-  position: absolute;
+    position: absolute;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  height: 100%;
+    height: 100%;
-  background: #e1fccf;
+    background: #e1fccf;
-  width: 0;
+    width: 0;
-  flex-direction: column;
+    flex-direction: column;
-  align-items: stretch;
+    align-items: stretch;
 
-  &__title {
+    &__title {
-    display: flex;
+      display: flex;
-    margin-top: 24px;
+      margin-top: 24px;
 
-    img {
+      img {
-      width: 160px;
+        width: 160px;
+      }
     }
-  }
 
-  &__navigation {
+    &__navigation {
-    margin-top: 28px;
+      margin-top: 28px;
-    padding: 0;
+      padding: 0;
-    list-style: none;
+      list-style: none;
-    font-size: 20px;
-    line-height: 33px;
-
-    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;
-    }
-  }
 
-  @media (max-width: 1375px) {
+      a,
-    &__title {
+      a:hover,
-      margin-top: 35px;
+      a:active {
+        color: #000000;
+      }
     }
 
     &__politic {
-      margin-top: 35px;
+      margin-top: 42px;
+      font-size: 14px;
+      line-height: 22px;
+      color: #000000;
     }
 
     &__contacts {
-      margin: 50px 0 25px 0;
+      margin-top: 127px;
+      color: #000000;
+      h4 {
+        font-size: 20px;
+        line-height: 33px;
+      }
+      p {
+        font-size: 14px;
+      }
+    }
+
+    @media (max-width: 1375px) {
+      &__title {
+        margin-top: 35px;
+      }
+
+      &__politic {
+        margin-top: 35px;
+      }
+
+      &__contacts {
+        margin: 50px 0 25px 0;
+      }
+    }
+  }
+
+  .auth-body.active {
+    visibility: visible;
+    transition: 0.1s ease-in-out;
+    opacity: 1;
+    display: flex;
+    width: 280px;
+    left: 100px;
+
+    @media (max-width: 1440px) {
+      left: 79px;
+    }
+
+    @media (max-width: 1375px) {
+      left: 0;
+      width: 100%;
+      height: 705px;
     }
   }
 }
-
-.auth-body.active {
-  visibility: visible;
-  transition: 0.1s ease-in-out;
-  opacity: 1;
-  display: flex;
-  width: 280px;
-  left: 100px;
-
-  @media (max-width: 1440px) {
-    left: 79px;
-  }
-
-  @media (max-width: 1375px) {
-    left: 0;
-    width: 100%;
-    height: 705px;
-  }
-}