burger menu component, fix styles autstaffing and

main pages, autstaffing add swiper
This commit is contained in:
2024-05-28 18:39:26 +03:00
parent 2a89ab3d5f
commit 224fc2c935
12 changed files with 1207 additions and 377 deletions

View File

@ -2,6 +2,8 @@ import React, { useState } from "react";
import SVG from "react-inlinesvg";
import { Link, NavLink } from "react-router-dom";
import { BurgerButton } from "@components/BurgerMenu/burgerButton";
import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
import { Footer } from "@components/Common/Footer/Footer";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";
@ -11,23 +13,12 @@ import clue from "assets/icons/landingClue.svg";
import tracker from "assets/icons/landingTracker.svg";
import codeBg from "assets/images/landingBackgroundCode.svg";
import cat from "assets/images/landingCat.png";
import ITguild from "assets/images/logo/ITguild.svg";
import "./landing.scss";
export const Landing = () => {
const [active, setActive] = useState(false);
const [modalReg, setModalReg] = useState(false);
const toggleBar = () => {
if (active) {
setActive(false);
document.body.style.overflow = "auto";
} else {
setActive(true);
document.body.style.overflow = "hidden";
}
};
const [menuActive, setMenuActive] = useState(false);
const opportunities = [
{
@ -66,6 +57,7 @@ export const Landing = () => {
return (
<section className="landing">
<ModalRegistration active={modalReg} setActive={setModalReg} />
<BurgerMenu active={menuActive} />
<div className="landing__container">
<div className="landing__head">
<h2 className="head__logo">ITGUILD</h2>
@ -83,20 +75,7 @@ export const Landing = () => {
<SVG src={authIcon} />
регистрация
</div>
<div className="burger-menu" onClick={() => toggleBar()}>
<div className="burger">
<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 className="burger-menu__logo">меню</h3>
</div>
<BurgerButton active={menuActive} setActive={setMenuActive} />
<div className="head__tracker">
<div>
<img src={tracker} alt="tracker" />
@ -153,41 +132,6 @@ export const Landing = () => {
</div>
<Footer />
</div>
<div className={active ? "auth-body active" : "auth-body"}>
<div className="auth-body__title">
<img src={ITguild}></img>
</div>
<ul className="auth-body__navigation">
<li>
<Link to={"/auth"}>Вход</Link>
</li>
<li>
<Link to={"/profile"}>Личный кабинет</Link>
</li>
<li>
<Link to={"/tracker-intro"}>Трекер</Link>
</li>
<li>
<Link to={"/quiz"}>Тесты</Link>
</li>
<li>
<Link to={"/forms"}>Формы</Link>
</li>
<li>
<a href="#">Школа</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
<li>
<Link to={"/blog"}>Блог</Link>
</li>
<li>
<Link to={"/frequently-asked-questions"}>FAQ</Link>
</li>
</ul>
<p className="auth-body__politic">Политика конфиденциальности</p>
</div>
</section>
);
};