From e2bce6fd38de157e6d0e95a3d3da9865ee62b70d Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Thu, 15 Feb 2024 13:25:57 +0300 Subject: [PATCH 1/3] add mobile burger-menu --- .../ProfileHeader/ProfileHeader.jsx | 128 +++++++- .../ProfileHeader/profileHeader.scss | 154 ++++++++- src/components/SideBar/sidebar.scss | 296 +++++++++--------- 3 files changed, 423 insertions(+), 155 deletions(-) diff --git a/src/components/ProfileHeader/ProfileHeader.jsx b/src/components/ProfileHeader/ProfileHeader.jsx index 602383f1..7bc3a26d 100644 --- 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 (
-
-
+
+
itguild. {user === "developer" ? "для разработчиков" : "для партнеров"} + + +
toggleBar()}> +
+
+
+
+ +
+ {/*
+ +
*/} + +
); }; diff --git a/src/components/ProfileHeader/profileHeader.scss b/src/components/ProfileHeader/profileHeader.scss index ede51420..be979d42 100644 --- a/src/components/ProfileHeader/profileHeader.scss +++ b/src/components/ProfileHeader/profileHeader.scss @@ -1,13 +1,136 @@ .profile-header { width: 100%; - display: flex; - flex-direction: column; - font-family: "LabGrotesque", sans-serif; + height: 80px; + background: #e1fccf; + 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 { - background: #ffffff; + &__logout-burger { + 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; diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index f24492f9..d3d3d7bf 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -16,184 +16,184 @@ @media (max-width: 1440px) { width: 80px; } -} -.auth-title { - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - height: 80%; - z-index: 9999; - - .text { + .auth-title { + position: relative; display: flex; flex-direction: column; - margin: 70px 0 0 0; - - h3 { - 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 { - transform: rotate(270deg); - font-size: 18px; - line-height: 32px; - width: 200px; - - img { - margin-right: 15px; - } - } - - @media (max-width: 1375px) { - flex-direction: row; - height: 100%; + justify-content: space-between; + align-items: center; + height: 80%; + z-index: 9999; .text { - margin: 0; - flex-direction: row; - - .burger { - margin-bottom: 5px; - } + display: flex; + flex-direction: column; + margin: 70px 0 0 0; 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; - width: 150px; - font-size: 12px; - transform: none; + transform: rotate(270deg); + font-size: 18px; + line-height: 32px; + width: 200px; img { - margin-right: 5px; - width: 15px; + margin-right: 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 { - padding: 40px 10px; - visibility: hidden; - transition: 0.2s ease-in-out; - opacity: 0; - z-index: 99; - position: absolute; - top: 0; - left: 0; - height: 100%; - background: #e1fccf; - width: 0; - flex-direction: column; - align-items: stretch; + .auth-body { + padding: 40px 10px; + visibility: hidden; + transition: 0.2s ease-in-out; + opacity: 0; + z-index: 99; + position: absolute; + top: 0; + left: 0; + height: 100%; + background: #e1fccf; + width: 0; + flex-direction: column; + align-items: stretch; - &__title { - display: flex; - margin-top: 24px; + &__title { + display: flex; + margin-top: 24px; - img { - width: 160px; + img { + width: 160px; + } } - } - &__navigation { - margin-top: 28px; - padding: 0; - 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 { + &__navigation { + margin-top: 28px; + padding: 0; + list-style: none; font-size: 20px; line-height: 33px; - } - p { - font-size: 14px; - } - } - @media (max-width: 1375px) { - &__title { - margin-top: 35px; + a, + a:hover, + 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; - } -} From 181bbc834ae720563252cad450a8160b0df76950 Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Thu, 15 Feb 2024 13:26:44 +0300 Subject: [PATCH 2/3] - --- .../ProfileCalendar/ProfileCalendarComponent.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx index 6899f2c8..a1a0a580 100644 --- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx +++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx @@ -286,15 +286,15 @@ export const ProfileCalendarComponent = React.memo( ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}` : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}` : activePeriod - ? "Выберите диапазон на календаре" - : "Выбрать диапазон"} + ? "Выберите диапазон на календаре" + : "Выбрать диапазон"} {totalRangeHours ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}` : endDate - ? "0 часов" - : ""} + ? "0 часов" + : ""} {endDate && ( Date: Thu, 15 Feb 2024 13:30:44 +0300 Subject: [PATCH 3/3] - --- src/App.jsx | 85 +++++++++++++++++++++++++++-------------------------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 441f00d0..e1fcc7eb 100644 --- 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);