apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added SideBar component

Browse Source
This commit is contained in:
MaxOvs19 2023-03-08 13:27:02 +03:00
parent c43170bf58
commit cb677a3f0b
5 changed files with 103 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/SideBar/SideBar.js Normal file
View File

@ -0,0 +1,22 @@
import React from "react";
import "./sidebar.scss";
export const SideBar = ({ active, setActive }) => {
return (
<div className={active ? "auth-menu active" : "auth-menu"}>
<div className="auth-title">
<div className="text">
<h3>МЕНЮ</h3>
<div className="burger">
<span className="burger__line"></span>
<span className="burger__line"></span>
<span className="burger__line"></span>
</div>
</div>
<p>2023 © Outstaffing</p>
</div>
</div>
);
};
export default SideBar;

26
src/components/SideBar/sidebar.scss Normal file
View File

@ -0,0 +1,26 @@
.auth-menu {
position: absolute;
top: 0;
left: 0;
width: 141px;
height: 100%;
background: #e1fccf;
}
.auth-menu.active {
}
.auth-title {
.text {
}
.burger {
&__line {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
}
}

95
src/pages/AuthForPartners/AuthForPartners.js
View File

@ -1,92 +1,93 @@
import React, {useEffect} from 'react' import React, { useEffect } from "react";
import arrow from '../../images/arrow__login_page.png' import arrow from "../../images/arrow__login_page.png";
import medium from '../../images/medium_male_big.png' import medium from "../../images/medium_male_big.png";
import cross from '../../images/cross.png' import cross from "../../images/cross.png";
import text from '../../images/Body_Text.png' import text from "../../images/Body_Text.png";
import vector from '../../images/Vector_Smart_Object.png' import vector from "../../images/Vector_Smart_Object.png";
import vectorBlack from '../../images/Vector_Smart_Object_black.png' import vectorBlack from "../../images/Vector_Smart_Object_black.png";
import { useSelector } from 'react-redux' import { useSelector } from "react-redux";
import { selectAuth } from '../../redux/outstaffingSlice' import { selectAuth } from "../../redux/outstaffingSlice";
import { useNavigate} from 'react-router-dom' import { useNavigate } from "react-router-dom";
import { Footer } from '../../components/Footer/Footer' import { Footer } from "../../components/Footer/Footer";
import { AuthBox } from '../../components/AuthBox/AuthBox' import { AuthBox } from "../../components/AuthBox/AuthBox";
import './authForPartners.scss' import "./authForPartners.scss";
import SideBar from "../../components/SideBar/SideBar";
const AuthForPartners = () => { const AuthForPartners = () => {
const isAuth = useSelector(selectAuth); const isAuth = useSelector(selectAuth);
let navigate = useNavigate(); let navigate = useNavigate();
const getToken = localStorage.getItem('auth_token') const getToken = localStorage.getItem("auth_token");
useEffect(()=> { useEffect(() => {
if (isAuth || getToken) { if (isAuth || getToken) {
navigate('/profile') navigate("/profile");
} }
}, [getToken]); }, [getToken]);
return ( return (
<section className='auth-partners'> <section className="auth-partners">
<div className='auth-partners__background'> <div className="auth-partners__background">
<img className='auth-partners__vector' src={vector} alt='' /> <img className="auth-partners__vector" src={vector} alt="" />
<img className='auth-partners__vector-black' src={vectorBlack} alt='' /> <img className="auth-partners__vector-black" src={vectorBlack} alt="" />
<div className='container'> <div className="container">
<div className='row'> <div className="row">
<div className='col-12 col-xl-6'> <div className="col-12 col-xl-6">
<div className='auth-partners__box'> <div className="auth-partners__box">
<AuthBox <AuthBox
title='Для партнёров' title="Для партнёров"
altTitle='Для разработчиков' altTitle="Для разработчиков"
roleChangeLink='/authdev' roleChangeLink="/authdev"
/> />
</div> </div>
</div> </div>
<div className='col-xl-2'> <div className="col-xl-2">
<img className='auth-partners__arrow' src={arrow} alt='' /> <img className="auth-partners__arrow" src={arrow} alt="" />
</div> </div>
<div className='col-12 col-xl-4'> <div className="col-12 col-xl-4">
<div className='auth-partners__info'> <div className="auth-partners__info">
<div className='auth-partners__info-box'> <div className="auth-partners__info-box">
<img src={medium} alt='' /> <img src={medium} alt="" />
<h3> <h3>
Frontend разработчик, Frontend разработчик,
<br /> Middle <br /> Middle
</h3> </h3>
</div> </div>
<div className='auth-partners__info-container'> <div className="auth-partners__info-container">
<div className='auth-partners__info-img'> <div className="auth-partners__info-img">
<div> <div>
<img className='cross' src={cross} alt='' /> <img className="cross" src={cross} alt="" />
</div> </div>
<div> <div>
{/* <img className='auth-specialists} src={specialists} alt="" /> */} {/* <img className='auth-specialists} src={specialists} alt="" /> */}
<p className='auth-partners__specialists'> <p className="auth-partners__specialists">
20 Специалистов 20 Специалистов
</p> </p>
</div> </div>
</div> </div>
<ul className='auth-partners__info-list'> <ul className="auth-partners__info-list">
<li className='auth-partners__info-item'>Ruby on Rails</li> <li className="auth-partners__info-item">Ruby on Rails</li>
<li className='auth-partners__info-item'>PHP</li> <li className="auth-partners__info-item">PHP</li>
<li className='auth-partners__info-item'>Python</li> <li className="auth-partners__info-item">Python</li>
<li className='auth-partners__info-item'>Vue.js</li> <li className="auth-partners__info-item">Vue.js</li>
<li className='auth-partners__info-item'>React. JS</li> <li className="auth-partners__info-item">React. JS</li>
</ul> </ul>
</div> </div>
<img className='auth-partners__img-text' src={text} alt='' /> <img className="auth-partners__img-text" src={text} alt="" />
</div> </div>
</div> </div>
</div> </div>
<Footer /> <Footer />
</div> </div>
</div> </div>
<SideBar />
</section> </section>
) );
}; };
export default AuthForPartners export default AuthForPartners;

13
src/pages/AuthForPartners/authForPartners.scss
View File

@ -1,5 +1,6 @@
.auth-partners { .auth-partners {
overflow: hidden; overflow: hidden;
position: relative;
} }
.auth-partners__background { .auth-partners__background {
@ -87,7 +88,7 @@
} }
.auth-partners__info-box > h3 { .auth-partners__info-box > h3 {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 2em; font-size: 2em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -120,7 +121,7 @@
} }
.auth-partners__specialists { .auth-partners__specialists {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.8em; font-size: 1.8em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -150,7 +151,7 @@
.auth-partners__info-item { .auth-partners__info-item {
color: #1f1f1f; color: #1f1f1f;
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 4em; font-size: 4em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -205,7 +206,7 @@
.auth-partners__footer--left > div > span { .auth-partners__footer--left > div > span {
color: #18586e; color: #18586e;
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.6em; font-size: 1.6em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -247,7 +248,7 @@
} }
.auth-partners__phone { .auth-partners__phone {
color: #003b65; color: #003b65;
font-family: 'CeraPro'; font-family: "CeraPro";
font-size: 2.1em; font-size: 2.1em;
letter-spacing: normal; letter-spacing: normal;
line-height: 25px; line-height: 25px;
@ -256,7 +257,7 @@
.auth-partners__working-hours { .auth-partners__working-hours {
color: #003b65; color: #003b65;
font-family: 'CeraPro'; font-family: "CeraPro";
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

9
tsconfig.json
View File

@ -1,9 +0,0 @@
{
"compilerOptions": {
"target": "es5", // компилируем ts код в js код версии ES5
"module": "esnext",
// для поддержки динамического импорта модулей
"allowSyntheticDefaultImports": true,
"jsx": "react"
}
}