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

2024-02-15 14:29:35 +03:00 · 2024-02-15 14:29:35 +03:00 · 65ca1c32ff
commit 65ca1c32ff
parent 26b27129fd 8525445e18
4 changed files with 466 additions and 194 deletions
--- a/src/App.jsx
+++ b/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,
-  Navigate
+  BrowserRouter as Router,
+  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 { TrackerRegistration } from "@pages/TrackerRegistration/TrackerRegistration";
-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 { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
+import { FrequentlyAskedQuestions } from "@pages/FrequentlyAskedQuestions/FrequentlyAskedQuestions";
 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 Blog from "./pages/Blog/Blog";
-import Statistics from "@pages/Statistics/Statistics";
+import { PartnerEmployees } from "@pages/PartnerEmployees/PartnerEmployees";
+import { PartnerRequests } from "@pages/PartnerRequests/PartnerRequests";
+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 { FrequentlyAskedQuestion } from "@pages/FrequentlyAskedQuestion/FrequentlyAskedQuestion";
-import Notification from "@components/Notification/Notification";
-import { useSelector } from "react-redux";
+import { PassingTests } from "@pages/Quiz/PassingTests";
+import { QuizPage } from "@pages/Quiz/QuizPage";
+import { QuizReportPage } from "@pages/Quiz/QuizReportPage";
+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);
--- a/src/components/ProfileHeader/ProfileHeader.jsx
+++ b/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="profile-header__container">
+      <div className="auth-title">
+        <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>
  );
 };
--- a/src/components/ProfileHeader/profileHeader.scss
+++ b/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 {
-    background: #ffffff;
+  &__logout-burger {
+    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;
--- a/src/components/SideBar/sidebar.scss
+++ b/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;
    }
+  }
 }