From a11c85ad145eba714b4ce60c6f68d22fd2c6cfc9 Mon Sep 17 00:00:00 2001 From: MaxOvs19 Date: Thu, 9 Mar 2023 18:44:31 +0300 Subject: [PATCH] Work of sidebar finished --- src/components/AuthBox/authBox.scss | 18 +-- src/components/SideBar/SideBar.js | 54 ++++++- src/components/SideBar/sidebar.scss | 133 +++++++++++++++++- .../AuthForDevelopers/AuthForDevelopers.js | 92 ++++++------ .../AuthForDevelopers/authForDevelopers.scss | 7 +- 5 files changed, 238 insertions(+), 66 deletions(-) diff --git a/src/components/AuthBox/authBox.scss b/src/components/AuthBox/authBox.scss index e5eb06cf..c90c55fa 100644 --- a/src/components/AuthBox/authBox.scss +++ b/src/components/AuthBox/authBox.scss @@ -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; } diff --git a/src/components/SideBar/SideBar.js b/src/components/SideBar/SideBar.js index ffe45aae..d0194e23 100644 --- a/src/components/SideBar/SideBar.js +++ b/src/components/SideBar/SideBar.js @@ -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 (
-
setActive(true)}> -
-
-
+
toggleBar()}> +
+
+

МЕНЮ

@@ -25,7 +38,36 @@ export const SideBar = () => { 2023 © Outstaffing

-
+ +
+
+

IT

+

guild

+ Аутстафинговая компания +
+ +

Политика конфиденциальности

+
+

+7 812 363 17 87

+

Перезвонить Вам?

+
+
); }; diff --git a/src/components/SideBar/sidebar.scss b/src/components/SideBar/sidebar.scss index 0688fc05..8646b23b 100644 --- a/src/components/SideBar/sidebar.scss +++ b/src/components/SideBar/sidebar.scss @@ -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; + } } diff --git a/src/pages/AuthForDevelopers/AuthForDevelopers.js b/src/pages/AuthForDevelopers/AuthForDevelopers.js index c0804c4a..483a605d 100644 --- a/src/pages/AuthForDevelopers/AuthForDevelopers.js +++ b/src/pages/AuthForDevelopers/AuthForDevelopers.js @@ -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(()=> { + useEffect(() => { if (isAuth || getToken) { - navigate('/profile') + navigate("/profile"); } }, [getToken]); - return ( -
-
- +
+
+ -
-
-
-
+
+
+
+
-
- +
+
-
-
-
- +
+
+
+

Управление
командой

-
-
+
+
- +
{/* +

20 Специалистов

-
    -
  • +
      +
    • Рабочее
      пространство
      • -
    • +
    • Управление задачами
- +
+
- ) + ); }; -export default AuthForDevelopers +export default AuthForDevelopers; diff --git a/src/pages/AuthForDevelopers/authForDevelopers.scss b/src/pages/AuthForDevelopers/authForDevelopers.scss index 5ab764bf..91fd6a2c 100644 --- a/src/pages/AuthForDevelopers/authForDevelopers.scss +++ b/src/pages/AuthForDevelopers/authForDevelopers.scss @@ -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;