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

burger menu component, fix styles autstaffing and

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

66
src/pages/Landing/Landing.jsx
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>
);
};

141
src/pages/Landing/landing.scss
View File

@ -124,147 +124,6 @@
}
}
}
.burger-menu {
cursor: pointer;
display: flex;
column-gap: 14px;
margin: 0 auto;
z-index: 10;
@media (max-width: 431px) {
margin: 0;
z-index: 9;
}
&__logo {
color: #838383;
font-weight: 700;
font-size: 14px;
line-height: 16.24px;
text-decoration: underline;
@media (max-width: 431px) {
display: none;
}
}
.burger {
padding: 1px;
display: flex;
flex-direction: column;
row-gap: 3px;
@media (max-width: 431px) {
padding: 0;
}
&__line {
width: 19px;
border-radius: 39px;
height: 3.8px;
background-color: #a7ca60;
transition: 0.4s;
&:last-child {
width: 10.6px;
}
}
.l1.change {
transform: rotate(-45deg) translate(-5px, 5px);
}
.l2.change {
opacity: 0;
}
.l3.change {
transform: rotate(45deg) translate(-5px, -5px);
width: 19px;
}
}
}
}
.auth-body {
padding: 40px 10px;
visibility: hidden;
transition: 0.2s ease-in-out;
opacity: 0;
z-index: 8;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #e1fccf;
width: 0;
flex-direction: column;
align-items: stretch;
&__title {
display: flex;
margin-top: 24px;
img {
width: 160px;
@media (max-width: 431px) {
width: 120px;
}
}
}
&__navigation {
margin-top: 28px;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
row-gap: 15px;
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;
@media (max-width: 431px) {
font-size: 11px;
}
}
&__contacts {
margin-top: 127px;
color: #000000;
h4 {
font-size: 20px;
line-height: 33px;
}
p {
font-size: 14px;
}
}
}
.auth-body.active {
visibility: visible;
transition: 0.1s ease-in-out;
opacity: 1;
display: flex;
width: 66vw;
left: 0;
overflow: hidden;
padding-left: 40px;
@media (max-width: 431px) {
width: 100vw;
}
}
&__info {