FilipeQuintanilha/desafio-react-e-typescript-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(header): Adiciona header mobile e tablet

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-27 20:44:42 -03:00
parent 479b2390b1
commit 5257c90b99
7 changed files with 212 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/svgs/close-icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

5
src/assets/svgs/menu-icon.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

1
src/components/Header.tsx
View File

@ -3,6 +3,7 @@ import React from "react";
import styles from "../styles/main.module.scss";
import { HeaderBottom } from "./HeaderBottom";
import { HeaderTop } from "./HeaderTop";
import { Modal } from "./Modal";
const Header = () => {
return (

28
src/components/HeaderTop.tsx
View File

@ -1,23 +1,39 @@
import React from "react";
import React, { useState } from "react";
import styles from "../styles/main.module.scss";
import menu from "../assets/svgs/menu-icon.svg";
import logo from "../assets/images/logo-M3Academy.png";
import cart from "../assets/svgs/cart.svg";
import { CustomForm } from "./CustomForm";
import { Modal } from "./Modal";
const HeaderTop = () => {
const [isOpened, setIsOpened] = useState(false);
return (
<div className={styles["header-wrapper__top"]}>
<img
className={styles["header-wrapper__top-logo"]}
src={logo}
alt="logo"
/>
<button
onClick={() => setIsOpened(true)}
className={styles["header-wrapper__top-linkMenu"]}
>
<img
className={styles["header-wrapper__top-menu"]}
src={menu}
alt="menu"
/>
</button>
<a href="/" className={styles["header-wrapper__top-linkM3"]}>
<img
className={styles["header-wrapper__top-logo"]}
src={logo}
alt="logo"
/>
</a>
<CustomForm />
<div className={styles["header-wrapper__top-carrinho"]}>
<a href="/">ENTRAR</a>
<img src={cart} alt="" />
</div>
<Modal isOpened={isOpened} setIsOpened={setIsOpened} />
</div>
);
};

69
src/components/Modal.scss Normal file
View File

@ -0,0 +1,69 @@
.modal_wrapper {
top: 0;
position: fixed;
left: 0;
right: 3.52%;
background: #ffffff;
bottom: 55.61%;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease-in-out;
.modal-content {
z-index: 8;
top: 0;
position: fixed;
left: 0;
right: 3.5%;
bottom: 44%;
&__wrapper {
position: relative;
.modal-login {
padding: 31px 0 31px 16px;
background-color: #000000;
font-size: 14px;
line-height: 16px;
color: #ffffff;
}
.modal-close {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
right: 16px;
}
}
.modal-items {
padding: 0 0 0 16px;
list-style-type: none;
.modal-item {
margin-bottom: 12px;
a {
font-size: 14px;
line-height: 16px;
text-decoration: none;
color: #c4c4c4;
}
}
}
}
.modal-overlay {
position: fixed;
top: 0%;
left: 0;
right: 0;
bottom: 0;
background: rgba(69, 69, 69, 0.7);
}
}
.opened {
opacity: 1;
pointer-events: all;
}

38
src/components/Modal.tsx Normal file
View File

@ -0,0 +1,38 @@
import React, { useState } from "react";
import "./Modal.scss";
import close from "../assets/svgs/close-icon.svg";
interface ModalProps {
isOpened: boolean;
setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
}
const Modal = ({ isOpened, setIsOpened }: ModalProps) => {
console.log(isOpened);
return (
<div className={`modal_wrapper ${isOpened && "opened"}`}>
<div className="modal-content">
<div className="modal-content__wrapper">
<div className="modal-login">ENTRAR</div>
<button className="modal-close" onClick={() => setIsOpened(false)}>
<img src={close} alt="close-icon" />
</button>
</div>
<ul className="modal-items">
<li className="modal-item">
<a href="/">CURSOS</a>
</li>
<li className="modal-item">
<a href="/">SAIBA MAIS</a>
</li>
<li className="modal-item">
<a href="/">INSTITUCIONAIS</a>
</li>
</ul>
</div>
<div className="modal-overlay" onClick={() => setIsOpened(false)}></div>
</div>
);
};
export { Modal };

75
src/styles/partials/Header.module.scss
View File

@ -8,6 +8,14 @@
justify-content: space-between;
align-items: center;
&-linkMenu {
display: none;
}
&-linkM3 {
display: flex;
}
&-logo {
}
@ -25,9 +33,13 @@
line-height: 16px;
border-radius: 5px;
padding: 8px 0 8px 16px;
width: calc(100% - 20px);
width: calc(100% - 21px);
outline: none;
height: 12px;
::placeholder {
color: $gray3;
}
}
&__img {
@ -68,13 +80,72 @@
}
}
@media screen and (max-width: 375px) {
.header-wrapper__top {
form {
width: 91.8% !important;
}
.campo-busca {
&__input {
height: 16px;
}
}
}
}
@media screen and (max-width: 1024px) {
.header-wrapper {
&__top {
padding: 25px 16px 88px 16px;
position: relative;
justify-content: center;
&-linkMenu {
display: block;
position: absolute;
left: 16px;
background: transparent;
border: none;
padding: 0;
}
form {
position: absolute;
top: 78px;
width: 97%;
}
&-carrinho {
width: auto;
a {
display: none;
}
img {
position: absolute;
right: 16px;
}
}
}
&__bottom {
display: none;
}
}
}
@media screen and (min-width: 2500px) {
.header-wrapper {
&__top {
&-logo {
&-linkM3 {
width: 11.55%;
}
&-logo {
width: 100%;
}
form {
width: 22.4%;
}