SabrinaMiranda/desafio-react-e-typescript-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/header' into develop

Browse Source
This commit is contained in:
Sabrina Miranda 2023-01-08 13:43:13 -03:00
commit 6b3d005f22
15 changed files with 616 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/HeaderBottom/HeaderBottom.module.scss Normal file
View File

@ -0,0 +1,7 @@
@use '../../variables';
.header-bottom {
@media (max-width: 1024px) {
display: none;
}
}

16
src/components/HeaderBottom/HeaderBottom.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import styles from "./HeaderBottom.module.scss";
import { HeaderNavBar } from '../HeaderNavBar/HeaderNavBar';
const HeaderBottom = () => {
return (
<div className={styles["header-bottom"]}>
<HeaderNavBar />
</div>
);
}
export {HeaderBottom};

43
src/components/HeaderNavBar/HeaderNavBar.module.scss Normal file
View File

@ -0,0 +1,43 @@
@use '../../variables';
.header-nav-bar {
height: 44px;
@media (min-width: 3600px) {
height: 70px;
}
@media ((min-width: 2500px) and (max-width: 3599px)){
height: 61px;
}
@media (max-width: 1024px) {
height: 0;
}
&__ul {
display: flex;
align-items: center;
text-transform: none;
padding: 14px 100px;
height: 44px;
gap: 55px;
@media (min-width: 3600px) {
height: 70px;
}
@media ((min-width: 2500px) and (max-width: 3599px)){
height: 61px;
}
@media (max-width: 1024px) {
flex-direction: column;
align-items: flex-start;
background-color: variables.$white;
height: 507px;
padding: 31px 16px;
gap: 0;
}
}
}

20
src/components/HeaderNavBar/HeaderNavBar.tsx Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import styles from "./HeaderNavBar.module.scss";
import { ItemNavBar } from '../ItemNavBar/ItemNavBar';
const HeaderNavBar = () => {
return (
<nav className={styles["header-nav-bar"]}>
<ul className={styles["header-nav-bar__ul"]}>
<ItemNavBar text="cursos" />
<ItemNavBar text="Saiba mais" />
<ItemNavBar text="Institucionais" />
</ul>
</nav>
);
}
export {HeaderNavBar};

324
src/components/HeaderTop/HeaderTop.module.scss Normal file
View File

@ -0,0 +1,324 @@
@use '../../variables';
.header-top {
border-bottom: 1px solid variables.$gray-400;
@media (max-width: 1024px) {
border-bottom: none;
}
&__wrapper {
display: grid;
grid-template-columns: 1fr minmax(264px, 24.4445%) 1fr;
padding: 22px 100px;
height: 76px;
@media (min-width: 3600px) {
grid-template-columns: 1fr 700px 1fr;
height: 111px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
grid-template-columns: 1fr 515px 1fr;
height: 101px;
}
@media ((min-width: 1900px) and (max-width: 2499px)) {
grid-template-columns: 1fr 415px 1fr;
}
@media (max-width: 1024px) {
grid-template-columns: 10% 80% 10%;
padding: 25px 16px;
height: 139px;
}
}
&__btn-hamburger {
display: none;
@media (max-width: 1024px) {
display: flex;
align-items: center;
background: transparent;
border: none;
grid-area: 1/1;
&__img {
width: 100%;
max-width: 28px;
}
&:hover {
filter: brightness(80%);
}
}
}
&__menu-mobile {
&__active,
&__desactive {
width: 96.484375%;
height: 585px;
position: absolute;
top: 0;
left: 0;
z-index: map-get(variables.$z-index, level2);
@media (min-width: 1025px) {
display: none;
}
@media (max-width: 375px) {
width: 90.4%;
}
}
&__active {
opacity: 1;
visibility: visible;
transition: all 0.5s ease;
transform: translateX(0%);
}
&__desactive {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
transform: translateX(-100%);
}
&__items {
display: flex;
justify-content: space-between;
height: 78px;
padding: 31px 16px;
background-color: variables.$black;
}
&__login{
display: flex;
align-items: center;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: variables.$white;
&:hover {
filter: brightness(80%);
}
}
&__close-btn {
background: transparent;
border: none;
&__img {
width: 100%;
max-width: 15px;
}
&:hover {
filter: brightness(80%);
}
}
}
&__logo {
display: flex;
align-items: center;
justify-content: left;
@media (max-width: 1024px) {
justify-content: center;
grid-area: 1/2;
}
&__img {
width: 100%;
max-width: 136px;
@media (min-width: 3600px) {
min-width: 290px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
min-width: 265px;
}
}
}
&__search-bar {
display: flex;
justify-content: center;
align-items: center;
position: relative;
@media (max-width: 1024px) {
grid-area: 2 / 1 / 2 / 4;
}
&__input {
margin: 0 auto;
width: 100%;
min-width: 264px;
height: 32px;
background-color: variables.$white;
border: 2px solid variables.$gray-500;
border-radius: 5px;
padding: 12px 16px;
font-size: 14px;
line-height: 16px;
color: variables.$gray-300;
@media (min-width: 3600px) {
max-width: 700px;
height: 62px;
font-size: 32px;
line-height: 38px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
max-width: 515px;
height: 57px;
font-size: 28px;
line-height: 33px;
}
@media ((min-width: 1900px) and (max-width: 2499px)){
max-width: 415px;
}
@media (max-width: 1024px) {
min-width: 100%;
margin-top: 25px;
height: 36px;
}
&::placeholder {
font-size: 14px;
line-height: 16px;
color: variables.$gray-300;
@media (min-width: 3600px) {
font-size: 32px;
line-height: 38px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
font-size: 28px;
line-height: 33px;
}
}
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
&__btn {
border: none;
background: transparent;
position: absolute;
top: 7px;
right: 16px;
@media (min-width: 3600px) {
top: 16px;
bottom: 11px;
}
@media ((min-width: 2500px) and (max-width: 3599px)){
top: 11px;
bottom: 11px;
}
@media (max-width: 1024px) {
top: 34px;
}
&__img {
@media (min-width: 2500px) {
width: 100%;
min-width: 35px;
}
}
}
}
&__menu {
display: flex;
align-items: center;
justify-content: right;
gap: 55px;
@media (max-width: 1024px) {
grid-area: 1/3;
gap: 0;
}
&__login {
color: variables.$white;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
&:hover {
filter: brightness(80%);
}
@media (min-width: 3600px) {
font-size: 32px;
line-height: 38px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
display: none;
}
}
&__btn-cart {
background: transparent;
border: none;
&:hover {
filter: brightness(80%);
}
&__img {
width: 100%;
max-width: 28px;
@media (min-width: 2500px) {
min-width: 54px;
}
}
}
}
&__overlay {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: variables.$shadow2;
z-index: map-get(variables.$z-index, level1);
transition: all 0.5s ease-in-out;
@media (min-width: 1025px) {
display: none;
}
}
&__overlay-close {
display: none;
}
}

107
src/components/HeaderTop/HeaderTop.tsx Normal file
View File

@ -0,0 +1,107 @@
import { useState, useEffect, useRef } from 'react';
import styles from "./HeaderTop.module.scss";
import imgLogo from "./assets/logo-m3academy.png";
import imgCart from "./assets/cart.svg";
import imgSearch from "./assets/search.svg";
import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg";
import imgCloseBtn from "./assets/close-menu-btn-icon.svg";
import { HeaderNavBar } from '../HeaderNavBar/HeaderNavBar';
const HeaderTop = () => {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
let menuRef:any= useRef();
useEffect(() => {
let handler = (e:any) => {
if (!menuRef.current.contains(e.target)) {
setOpen(false)
}
};
document.addEventListener("mousedown", handler);
});
//--------------------------------------------------------
const [search, setSearch] = useState("");
const handleSearch = (target:any) => {
setSearch(target.value);
}
const cleanSearch = () => setSearch('');
return (
<div className={styles["header-top"]}>
<div className={styles["header-top__wrapper"]}>
<button className={styles["header-top__btn-hamburger"]} onClick={handleOpen}>
<img className={styles["header-top__btn-hamburger__img"]} src= {imgHamburgerBtn} alt="Ícone Menu Hamburguer" />
</button>
<div className={open === true
? styles["header-top__menu-mobile__active"]
: styles["header-top__menu-mobile__desactive"]} ref={menuRef}>
<div className={styles["header-top__menu-mobile__items"]} >
<a href="/" className={styles["header-top__menu-mobile__login"]} >
Entrar
</a>
<button className={styles["header-top__menu-mobile__close-btn"]} onClick={handleClose}>
<img className={styles["header-top__menu-mobile__close-btn__img"]} src= {imgCloseBtn} alt="Ícone Fechar" />
</button>
</div>
<HeaderNavBar />
</div>
<picture className={styles["header-top__logo"]}>
<a href="/">
<img className={styles["header-top__logo__img"]} src= {imgLogo} alt="Logo M3 Academy" />
</a>
</picture>
<div className={styles["header-top__search-bar"]}>
<input className={styles["header-top__search-bar__input"]}
type='search' id='search-bar' name='search' placeholder='Buscar...'
value={search}
onChange={handleSearch}
onBlur={cleanSearch}
/>
<button className={styles["header-top__search-bar__btn"]} type='submit'>
<img className={styles["header-top__search-bar__btn__img"]} src= {imgSearch} alt="ìcone Lupa" />
</button>
</div>
<div className={styles["header-top__menu"]}>
<a href='/' className={styles["header-top__menu__login"]}>
Entrar
</a>
<button className={styles["header-top__menu__btn-cart"]}>
<img className={styles["header-top__menu__btn-cart__img"]} src={imgCart} alt="Ícone Carrinho" />
</button>
</div>
</div>
<div className={open === false
? styles["header-top__overlay-close"]
: styles["header-top__overlay"]}
>
</div>
</div>
);
}
export {HeaderTop};

12
src/components/HeaderTop/assets/cart.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5696_970)">
<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
<path d="M11.8462 21.5385C10.2132 21.5385 8.88464 22.867 8.88464 24.5C8.88464 26.133 10.2132 27.4615 11.8462 27.4615C13.4792 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8462 21.5385Z" fill="white"/>
<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_5696_970">
<rect width="28" height="28" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/components/HeaderTop/assets/close-menu-btn-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/components/HeaderTop/assets/hamburger-menu-btn-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

BIN
src/components/HeaderTop/assets/logo-m3academy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

10
src/components/HeaderTop/assets/search.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5696_966)">
<path d="M13.2094 11.6186C14.0951 10.409 14.6249 8.92328 14.6249 7.31261C14.6249 3.28064 11.3444 0.00012207 7.31245 0.00012207C3.28048 0.00012207 0 3.28064 0 7.31261C0 11.3446 3.28052 14.6251 7.31248 14.6251C8.92315 14.6251 10.409 14.0952 11.6186 13.2094L16.4092 18L18 16.4092C18 16.4092 13.2094 11.6186 13.2094 11.6186ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1042 2.25001 7.31261C2.25001 4.52098 4.52086 2.25013 7.31248 2.25013C10.1041 2.25013 12.375 4.52098 12.375 7.31261C12.375 10.1042 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
</g>
<defs>
<clipPath id="clip0_5696_966">
<rect width="18" height="18" rx="5" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

29
src/components/ItemNavBar/ItemNavBar.module.scss Normal file
View File

@ -0,0 +1,29 @@
@use '../../variables';
.nav-bar__item {
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: variables.$white;
cursor: pointer;
@media (min-width: 3600px) {
font-size: 32px;
line-height: 38px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
font-size: 28px;
line-height: 33px;
}
@media (max-width: 1024px) {
color: variables.$gray-400;
margin-bottom: 12px;
}
&:hover {
filter: brightness(80%);
}
}

10
src/components/ItemNavBar/ItemNavBar.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import styles from "./ItemNavBar.module.scss";
const ItemNavBar = ( props:any) => {
const { text } = props;
return <li className={styles["nav-bar__item"]}> { text } </li>;
};
export { ItemNavBar };

18
src/pages/Home.module.scss Normal file
View File

@ -0,0 +1,18 @@
@use '../variables';
.header {
background-color: variables.$black;
height: 120px;
@media (min-width: 3600px) {
height: 182px;
}
@media ((min-width: 2500px) and (max-width: 3599px)) {
height: 162px;
}
@media (max-width: 1024px) {
height: 139px;
}
}

12
src/pages/Home.tsx
View File

@ -1,11 +1,21 @@
import React from 'react';
import styles from "./Home.module.scss";
import { HeaderTop } from '../components/HeaderTop/HeaderTop';
import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom';
const Home = () => {
return (
<>
<header></header>
<header className={styles["header"]}>
<HeaderTop />
<HeaderBottom />
</header>
<main></main>
<footer></footer>
</>
);