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/headertwo' into develop

Browse Source
This commit is contained in:
Sabrina Miranda 2023-01-12 23:47:49 -03:00
commit d2806d3afa
5 changed files with 121 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/HeaderNavBar/HeaderNavBar.module.scss
View File

@ -40,4 +40,32 @@
gap: 0;
}
}
&__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%);
}
}
}

36
src/components/HeaderNavBar/HeaderNavBar.tsx
View File

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

24
src/components/HeaderTop/HeaderTop.module.scss
View File

@ -52,12 +52,16 @@
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
}
&__menu-mobile {
&__active,
&__desactive {
&__inactive {
width: 96.484375%;
height: 585px;
position: absolute;
@ -81,7 +85,7 @@
transform: translateX(0%);
}
&__desactive {
&__inactive {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
@ -107,6 +111,10 @@
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
&__close-btn {
@ -121,6 +129,10 @@
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
}
}
@ -267,6 +279,10 @@
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
@media (min-width: 3600px) {
font-size: 32px;
@ -290,6 +306,10 @@
&:hover {
filter: brightness(80%);
}
&:active {
filter: brightness(100%);
}
&__img {
width: 100%;

91
src/components/HeaderTop/HeaderTop.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef } from "react";
import styles from "./HeaderTop.module.scss";
@ -8,22 +8,21 @@ 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';
import { HeaderNavBar } from "../HeaderNavBar/HeaderNavBar";
const HeaderTop = () => {
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
let menuRef:any= useRef();
let menuRef = useRef<any>();
useEffect(() => {
let handler = (e:any) => {
if (!menuRef.current.contains(e.target)) {
setOpen(false)
}
let handler = (e: MouseEvent) => {
if (!menuRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handler);
@ -33,75 +32,81 @@ const HeaderTop = () => {
const [search, setSearch] = useState("");
const handleSearch = (target:any) => {
const handleSearch = (target: any) => {
setSearch(target.value);
}
const cleanSearch = () => setSearch('');
};
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" />
<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
<div ref={menuRef} className={ open === true
? styles["header-top__menu-mobile__active"]
: styles["header-top__menu-mobile__desactive"]} ref={menuRef}>
: styles["header-top__menu-mobile__inactive"] } >
<div className={styles["header-top__menu-mobile__items"]} >
<a href="/" className={styles["header-top__menu-mobile__login"]} >
Entrar
<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 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>
</div>
<HeaderNavBar />
<HeaderNavBar />
</div>
<picture className={styles["header-top__logo"]}>
<a href="/">
<img className={styles["header-top__logo__img"]} src= {imgLogo} alt="Logo M3 Academy" />
</a>
<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...'
<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 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>
<div className={styles["header-top__menu"]}>
<a href='/' className={styles["header-top__menu__login"]}>
<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" />
<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
className={ open === false
? styles["header-top__overlay-close"]
: styles["header-top__overlay"] } >
</div>
</div>
);
}
};
export {HeaderTop};
export { HeaderTop };

2
src/components/Newsletter/Newsletter.module.scss
View File

@ -136,7 +136,7 @@
text-transform: uppercase;
&:hover {
filter: opacity(.8);
filter: opacity(.9);
}
&:active {