Thiago.bronisio/desafio-react-e-typescript-thiago-bronisio
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona o html estatico do header mobile

Browse Source
This commit is contained in:
Thiago Bronisio 2023-01-05 23:23:44 -03:00
parent 9866c57b43
commit dc6b02c817
9 changed files with 211 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/img/close.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/img/hamburguer.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

56
src/components/Header/Header.module.scss
View File

@ -1,5 +1,5 @@
.container-header {
.header-wrapper {
.container {
&__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
@ -7,12 +7,17 @@
background-color: var(--black);
border-bottom: 1px solid var(--gray-100);
@media (max-width: 1024px) {
border: none;
padding: 25px 16px;
}
&__container-logo {
width: 12.597%;
width: 136px;
height: 25.86px;
@media screen and (min-width: 2500px) {
width: 11.55%;
@media (min-width: 2500px) {
width: 265.62px;
height: 50.5px;
}
@ -22,7 +27,7 @@
.logo-m3 {
width: 100%;
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
height: 50.5px;
}
}
@ -32,8 +37,11 @@
&__container-input-busca {
position: relative;
width: 24.452%;
@media (max-width: 1024px) {
display: none;
}
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
width: 22.421%;
}
@ -52,7 +60,7 @@
//font-family: roboto;
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
height: 57px;
font-weight: 400;
@ -75,7 +83,11 @@
right: 17px;
cursor: pointer;
@media screen and (min-width: 2500px) {
@media (max-width: 1025px) {
display: none;
}
@media (min-width: 2500px) {
width: 35.15px;
height: 35.15px;
top: 10px;
@ -85,7 +97,8 @@
img {
height: 18px;
width: 18px;
@media screen and (min-width: 2500px) {
color: var(--black-200);
@media (min-width: 2500px) {
width: 35.15px;
height: 35.15px;
}
@ -107,21 +120,31 @@
font-family: var(--font-roboto);
cursor: pointer;
@media screen and (min-width: 2500px) {
@media (max-width: 1024px) {
display: none;
}
@media (min-width: 2500px) {
font-weight: 400;
font-size: 28px;
line-height: 33px;
}
}
img {
button {
background: transparent;
border: none;
width: 28px;
height: 28px;
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
width: 54.68px;
height: 54.68px;
}
img {
width: 100%;
}
}
}
}
@ -129,6 +152,9 @@
.container-nav {
background-color: var(--black);
padding: 14px 100.32px 14px 100px;
@media (max-width: 1025px) {
display: none;
}
ul {
display: flex;
@ -141,7 +167,7 @@
color: var(--white);
font-family: var(--font-roboto);
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
font-weight: 500;
font-size: 28px;
line-height: 33px;
@ -156,7 +182,7 @@
li:nth-child(2) {
margin: 0 55px;
@media screen and (min-width: 2500px) {
@media (min-width: 2500px) {
margin: 0 55.92px 0 55.71px;
}
}

25
src/components/Header/Header.tsx
View File

@ -1,4 +1,7 @@
import React from "react";
import { InputMenuMobile } from "./InputMenuMobile/InputMenuMobile"
import { MenuHamburguer } from "./MenuHamburguer/MenuHamburguer"
import styleHeader from "./Header.module.scss"
import logo from "../../assets/img/logo-m3.png"
@ -8,17 +11,21 @@ import search from "../../assets/img/search.svg"
export function Header() {
return (
<header className={styleHeader["container-header"]}>
<div className={styleHeader["header-wrapper"]}>
<div className={styleHeader["header-wrapper__container-logo"]}>
return (
<header className={styleHeader["container"]}>
<div className={styleHeader["container__wrapper"]}>
<MenuHamburguer />
<div className={styleHeader["container__wrapper__container-logo"]}>
<a href="teste">
<img className={styleHeader["logo-m3"]} src={logo} alt="Logo M3 Academy" />
</a>
</div>
<div className={styleHeader["header-wrapper__container-input-busca"]}>
<div className={styleHeader["container__wrapper__container-input-busca"]}>
<input
className={styleHeader["input-busca"]}
placeholder="Buscar...">
@ -28,13 +35,17 @@ export function Header() {
</button>
</div>
<div className={styleHeader["header-wrapper__container-login-cart"]}>
<div className={styleHeader["container__wrapper__container-login-cart"]}>
<p>ENTRAR</p>
<img src={cart} alt="Carrinho" />
<button>
<img src={cart} alt="Carrinho" />
</button>
</div>
</div>
<InputMenuMobile />
<nav className={styleHeader["container-nav"]}>
<ul>
<li><a href="teste">CURSOS</a></li>

27
src/components/Header/InputMenuMobile/InputMenuMobile.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from "react";
import styleInput from "./inputMenuMobile.module.scss"
import search from "../../../assets/img/search.svg"
export const InputMenuMobile = () => {
return (
<form className={styleInput["container__form-input-button"]}>
<input
className={styleInput["container__form-input-button__input"]}
type="text"
name="search"
placeholder="Buscar..."
/>
<button
type="submit"
className={styleInput["container__form-input-button__button"]}>
<img src={search} alt="Icone de busca" />
</button>
</form>
)
}
export default InputMenuMobile;

47
src/components/Header/InputMenuMobile/inputMenuMobile.module.scss Normal file
View File

@ -0,0 +1,47 @@
.container {
&__form-input-button {
background: var(--black);
position: relative;
padding: 0 16px 25px;
display: flex;
@media (min-width: 1025px) {
display: none;
}
&__input {
width: 100%;
height: 36px;
border: 2px solid var(--white-100);
border-radius: 5px;
padding: 10px 40px 10px 16px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: var(--font-roboto);
&::placeholder {
color: var(--gray-100);
}
}
&__button {
position: absolute;
z-index: 10;
border: none;
background: transparent;
outline: none;
top: 8px;
right: 30px;
width: 18px;
height: 18px;
img {
width: 18px;
height: 18px;
color: var(--black-200);
}
}
}
}

18
src/components/Header/MenuHamburguer/MenuHamburguer.module.scss Normal file
View File

@ -0,0 +1,18 @@
.container {
&__wrapper {
&__btnHamburguer {
@media (min-width: 1025px) {
display: none;
}
button {
background: transparent;
border: none;
img {
width: 28px;
height: 22.5px;
}
}
}
}
}

50
src/components/Header/MenuHamburguer/MenuHamburguer.tsx Normal file
View File

@ -0,0 +1,50 @@
import React, { useState } from "react";
import styleMenu from "./MenuHamburguer.module.scss"
import hamburguer from "../../../assets/img/hamburguer.svg"
import closeMenu from "../../../assets/img/close.svg"
export const MenuHamburguer = () => {
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const handleMenuHamburguer = (state: boolean) => {
setMenuOpen(!state)
};
return (
<>
<div className={styleMenu["container__wrapper__btnHamburguer"]}>
<button onClick={() => handleMenuHamburguer(menuOpen)}>
<img src={hamburguer} alt="Imagem expansão de menu" />
</button>
</div>
{menuOpen &&
<>
<div>
<a href="/">Entrar</a>
<button>
<img src={closeMenu} alt="Imagem fechar menu" />
</button>
</div>
<nav>
<ul>
<li><a href="/">Cursos</a></li>
<li><a href="/">Saiba mais</a></li>
<li><a href="/">Institucionais</a></li>
</ul>
</nav>
</>
}
</>
)
}
export default MenuHamburguer;

1
src/global.scss
View File

@ -4,6 +4,7 @@
--black: #000000;
--black-100: #303030;
--black-200: #292929;
--white: #ffffff;
--white-100: #f0f0f0;