From e2bce6fd38de157e6d0e95a3d3da9865ee62b70d Mon Sep 17 00:00:00 2001 From: Gubar Nikita Date: Thu, 15 Feb 2024 13:25:57 +0300 Subject: [PATCH] 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; - } -}