Work of sidebar finished

This commit is contained in:
MaxOvs19 2023-03-09 18:44:31 +03:00
parent b4adb4bdd5
commit a11c85ad14
5 changed files with 238 additions and 66 deletions

View File

@ -5,7 +5,7 @@
margin-bottom: 194px;
&__header {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -22,7 +22,7 @@
}
&__sign-in {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 5.3em;
font-weight: 700;
font-style: normal;
@ -32,7 +32,7 @@
margin-top: 164px;
span {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
color: #52b709;
font-style: normal;
letter-spacing: 0.56px;
@ -49,7 +49,7 @@
span {
color: #18586e;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 500;
font-style: normal;
@ -72,7 +72,7 @@
label {
color: #48802d;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.4em;
font-weight: 500;
font-style: normal;
@ -91,7 +91,7 @@
border: 1px solid #c4c4c4;
background-color: #ffffff;
margin-bottom: 60px;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.2em;
font-weight: 300;
font-style: normal;
@ -124,7 +124,7 @@
);
border: none;
color: #ffffff;
font-family: 'Muller';
font-family: "Muller";
font-weight: 500;
font-size: 2.2em;
font-weight: bold;
@ -152,7 +152,7 @@
border-radius: 38px;
background-color: #ffffff;
border: 2px solid #6aaf5c;
font-family: 'Muller';
font-family: "Muller";
font-size: 2em;
font-weight: 300;
letter-spacing: normal;
@ -174,7 +174,7 @@
margin-bottom: 0px;
&__header {
margin-top: 50px;
margin-top: 120px;
line-height: 20px;
}

View File

@ -7,15 +7,28 @@ import "./sidebar.scss";
export const SideBar = () => {
const [active, setActive] = useState(false);
const toggleBar = () => {};
const toggleBar = () => {
if (active) {
setActive(false);
} else {
setActive(true);
}
};
return (
<div className="auth-menu">
<div className="auth-title">
<div className="text">
<div className="burger" onClick={() => setActive(true)}>
<div className="burger__line"></div>
<div className="burger__line"></div>
<div className="burger__line"></div>
<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>
<h3>МЕНЮ</h3>
@ -25,7 +38,36 @@ export const SideBar = () => {
2023 © Outstaffing
</p>
</div>
<div className={active ? "auth-body active" : "auth-body"}></div>
<div className={active ? "auth-body active" : "auth-body"}>
<div className="auth-body__title">
<h3>IT</h3>
<p>guild</p>
<span>Аутстафинговая компания</span>
</div>
<ul className="auth-body__navigation">
<li>
<a href="#">Вход для партнеров</a>
</li>
<li>
<a href="#">Кабинет разработчика</a>
</li>
<li>
<a href="#">Школа</a>
</li>
<li>
<a href="#">Отрасли</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
</ul>
<p className="auth-body__politic">Политика конфиденциальности</p>
<div className="auth-body__contacts">
<h4>+7 812 363 17 87</h4>
<p>Перезвонить Вам?</p>
</div>
</div>
</div>
);
};

View File

@ -6,6 +6,13 @@
width: 141px;
height: 100%;
background: #e1fccf;
@media (max-width: 575.98px) {
position: fixed;
width: 100%;
height: 80px;
margin-bottom: 50px;
}
}
.auth-title {
@ -29,6 +36,7 @@
}
.burger {
cursor: pointer;
margin-bottom: 70px;
&__line {
@ -39,11 +47,21 @@
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 {
rotate: 270deg;
transform: rotate(270deg);
font-size: 18px;
line-height: 32px;
width: 200px;
@ -52,9 +70,41 @@
margin-right: 15px;
}
}
@media (max-width: 575.98px) {
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;
display: none;
z-index: -1;
position: absolute;
top: 0;
@ -62,8 +112,87 @@
height: 100%;
background: #e1fccf;
width: 0;
flex-direction: column;
align-items: stretch;
&__title {
display: flex;
flex-wrap: wrap;
h3 {
color: #52b709;
font-size: 35px;
line-height: 32px;
margin-right: 10px;
}
p {
width: 70%;
font-size: 30px;
line-height: 32px;
color: #000000;
}
span {
font-size: 5px;
margin-left: 41px;
}
}
&__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: 12px;
line-height: 22px;
color: #000000;
}
&__contacts {
margin-top: 127px;
color: #000000;
h4 {
font-size: 20px;
line-height: 33px;
}
p {
font-size: 12px;
}
}
@media (max-width: 575.98px) {
&__title {
margin-top: 35px;
}
&__politic {
margin-top: 35px;
}
&__contacts {
margin: 50px 0 25px 0;
}
}
}
.auth-body.active {
width: 565px;
display: flex;
width: 424px;
left: 140px;
@media (max-width: 575.98px) {
left: 0;
width: 100%;
height: 535px;
}
}

View File

@ -1,101 +1,101 @@
import React, {useEffect} from 'react'
import React, { useEffect } from "react";
import { AuthBox } from '../../components/AuthBox/AuthBox'
import { AuthBox } from "../../components/AuthBox/AuthBox";
import { useSelector } from 'react-redux'
import arrow from '../../images/arrow__login_page.png'
import authImg from '../../images/auth_img.png'
import cross from '../../images/cross.png'
import text from '../../images/Body_Text.png'
import vector from '../../images/Vector_Smart_Object.png'
import vectorBlack from '../../images/Vector_Smart_Object_black.png'
import { useSelector } from "react-redux";
import arrow from "../../images/arrow__login_page.png";
import authImg from "../../images/auth_img.png";
import cross from "../../images/cross.png";
import text from "../../images/Body_Text.png";
import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { selectAuth } from '../../redux/outstaffingSlice'
import { useNavigate} from 'react-router-dom'
import { Footer } from '../../components/Footer/Footer'
import { selectAuth } from "../../redux/outstaffingSlice";
import { useNavigate } from "react-router-dom";
import { Footer } from "../../components/Footer/Footer";
import SideBar from "../../components/SideBar/SideBar";
import './authForDevelopers.scss'
import "./authForDevelopers.scss";
const AuthForDevelopers = () => {
const isAuth = useSelector(selectAuth);
let navigate = useNavigate();
const getToken = localStorage.getItem('auth_token')
const getToken = localStorage.getItem("auth_token");
useEffect(() => {
if (isAuth || getToken) {
navigate('/profile')
navigate("/profile");
}
}, [getToken]);
return (
<section className='auth-developers'>
<div className='auth-developers__background'>
<img className='auth-developers__vector' src={vector} alt='' />
<section className="auth-developers">
<div className="auth-developers__background">
<img className="auth-developers__vector" src={vector} alt="" />
<img
className='auth-developers__vector-black'
className="auth-developers__vector-black"
src={vectorBlack}
alt=''
alt=""
/>
<div className='container'>
<div className='row'>
<div className='col-12 col-xl-6'>
<div className='auth-developers__box'>
<div className="container">
<div className="row">
<div className="col-12 col-xl-6">
<div className="auth-developers__box">
<AuthBox
title='Для разработчиков'
altTitle='Для партнёров'
roleChangeLink='/auth'
title="Для разработчиков"
altTitle="Для партнёров"
roleChangeLink="/auth"
/>
</div>
</div>
<div className='col-xl-2'>
<img className='auth-developers__arrow' src={arrow} alt='' />
<div className="col-xl-2">
<img className="auth-developers__arrow" src={arrow} alt="" />
</div>
<div className='col-12 col-xl-4'>
<div className='auth-developers__info'>
<div className='auth-developers__info-box'>
<img src={authImg} alt='' />
<div className="col-12 col-xl-4">
<div className="auth-developers__info">
<div className="auth-developers__info-box">
<img src={authImg} alt="" />
<h3>
Управление
<br /> командой
</h3>
</div>
<div className='auth-developers__info-container'>
<div className='auth-developers__info-img'>
<div className="auth-developers__info-container">
<div className="auth-developers__info-img">
<div>
<img className='cross' src={cross} alt='' />
<img className="cross" src={cross} alt="" />
</div>
<div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className='auth-developers__specialists'>
<p className="auth-developers__specialists">
20 Специалистов
</p>
</div>
</div>
<ul className='auth-developers__info-list'>
<li className='auth-developers__info-item'>
<ul className="auth-developers__info-list">
<li className="auth-developers__info-item">
Рабочее
<br />
пространство
</li>
<li className='auth-info__list-item'>
<li className="auth-info__list-item">
Управление задачами
</li>
</ul>
</div>
<img className='auth-developers__img-text' src={text} alt='' />
<img className="auth-developers__img-text" src={text} alt="" />
</div>
</div>
</div>
<Footer />
</div>
</div>
<SideBar />
</section>
)
);
};
export default AuthForDevelopers
export default AuthForDevelopers;

View File

@ -1,5 +1,6 @@
.auth-developers {
overflow: hidden;
position: relative;
}
.auth-developers__background {
@ -93,7 +94,7 @@
}
.auth-developers__info-box > h3 {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2em;
font-weight: 100;
font-style: normal;
@ -126,7 +127,7 @@
}
.auth-developers__specialists {
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 1.8em;
font-weight: 100;
font-style: normal;
@ -152,7 +153,7 @@
.auth-developers__info-item {
color: #1f1f1f;
font-family: 'GT Eesti Pro Display';
font-family: "GT Eesti Pro Display";
font-size: 2.6em;
font-weight: 700;
font-style: normal;