add mobile burger-menu
This commit is contained in:
parent
04db457944
commit
e2bce6fd38
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user