From 7a72298d2ac8dd69acd9d049054023289f449d5a Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Wed, 4 Jan 2023 13:09:37 -0300 Subject: [PATCH 01/12] refactor(header): split component in others and add feature for close menu mobile before click in others elements --- .../Header/containers/@types/index.d.ts | 5 + src/template/Header/containers/_Bottom.tsx | 45 ++++++ src/template/Header/containers/_Search.tsx | 14 ++ src/template/Header/containers/_Top.tsx | 37 +++++ src/template/Header/index.module.scss | 4 +- src/template/Header/index.tsx | 139 +++++------------- 6 files changed, 137 insertions(+), 107 deletions(-) create mode 100644 src/template/Header/containers/@types/index.d.ts create mode 100644 src/template/Header/containers/_Bottom.tsx create mode 100644 src/template/Header/containers/_Search.tsx create mode 100644 src/template/Header/containers/_Top.tsx diff --git a/src/template/Header/containers/@types/index.d.ts b/src/template/Header/containers/@types/index.d.ts new file mode 100644 index 0000000..cb8a5cd --- /dev/null +++ b/src/template/Header/containers/@types/index.d.ts @@ -0,0 +1,5 @@ +export type ISearchProps = HTMLAttributes + +export interface ITopProps { + handleClickOpen: () => void +} diff --git a/src/template/Header/containers/_Bottom.tsx b/src/template/Header/containers/_Bottom.tsx new file mode 100644 index 0000000..4be1e3e --- /dev/null +++ b/src/template/Header/containers/_Bottom.tsx @@ -0,0 +1,45 @@ +import { HTMLAttributes } from 'react' +import closeIcon from '../../../assets/icons/x.svg' + +import styles from '../index.module.scss' + +export interface IBottomProps { + isMenuOpen: boolean + handleClose: () => void +} + +export function Bottom({ isMenuOpen, handleClose }: IBottomProps) { + function closeMenu(e: any) { + if (e.target.classList.contains(styles.menu)) { + if (e.target.children[0] !== e.target) { + handleClose() + } + } + } + + return ( +
closeMenu(e)} + className={`${styles.menu} ${isMenuOpen ? styles.active : ''}`} + > +
+
+ Entrar + +
+ +
    + {['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => { + return ( +
  • + {item} +
    • + ) + })} +
+
+
+ ) +} diff --git a/src/template/Header/containers/_Search.tsx b/src/template/Header/containers/_Search.tsx new file mode 100644 index 0000000..56cc287 --- /dev/null +++ b/src/template/Header/containers/_Search.tsx @@ -0,0 +1,14 @@ +import { ISearchProps } from './@types' + +import searchIcon from '../../../assets/icons/search.svg' + +export function Search({ ...props }: ISearchProps) { + return ( +
+ + +
+ ) +} diff --git a/src/template/Header/containers/_Top.tsx b/src/template/Header/containers/_Top.tsx new file mode 100644 index 0000000..d9d98da --- /dev/null +++ b/src/template/Header/containers/_Top.tsx @@ -0,0 +1,37 @@ +import { ITopProps } from './@types' + +import { Search } from './_Search' + +import cartIcon from '../../../assets/icons/minicart.svg' +import openIcon from '../../../assets/icons/hamburger.svg' +import logoImg from '../../../assets/m3-logo-small.png' +import logoMediumImg from '../../../assets/m3-logo-medium.png' + +import styles from '../index.module.scss' + +export function Top({ handleClickOpen }: ITopProps) { + return ( +
+ + + + + + logo da M3 Academy + + + + + +
+ Entrar + + +
+
+ ) +} diff --git a/src/template/Header/index.module.scss b/src/template/Header/index.module.scss index a855dc8..4e8388c 100644 --- a/src/template/Header/index.module.scss +++ b/src/template/Header/index.module.scss @@ -7,7 +7,7 @@ $containers: ( 'xl': 2299.68px, ); -.header { +.component { padding: 25px 0; position: sticky; @@ -18,7 +18,7 @@ $containers: ( background-color: var(--clr-common-black); } -.header { +.component { @media only screen and (min-width: 1025px) { padding: 25px 0 0; } diff --git a/src/template/Header/index.tsx b/src/template/Header/index.tsx index 04db0ef..925dffd 100644 --- a/src/template/Header/index.tsx +++ b/src/template/Header/index.tsx @@ -1,119 +1,48 @@ -import logoImg from '../../assets/m3-logo-small.png' -import logoMediumImg from '../../assets/m3-logo-medium.png' -import searchIcon from '../../assets/icons/search.svg' -import cartIcon from '../../assets/icons/minicart.svg' -import openIcon from '../../assets/icons/hamburger.svg' -import closeIcon from '../../assets/icons/x.svg' +import { useMemo, useState } from 'react' -import css from './index.module.scss' -import { HTMLAttributes, useMemo, useState } from 'react' +import { Top } from './containers/_Top' +import { Bottom } from './containers/_Bottom' +import { Search } from './containers/_Search' -interface SearchProps extends HTMLAttributes {} - -export function Search({ ...props }: SearchProps) { - return ( -
- - -
- ) -} - -interface ContainerBottomProps { - isOpen: boolean - handleClose: () => void -} - -const ContainerBottom = ({ isOpen, handleClose }: ContainerBottomProps) => { - return ( -
-
-
- Entrar - -
- -
    - {['Cursos', 'Saiba Mais', 'Institucionais'].map((item, index) => { - return ( -
  • - {item} -
    • - ) - })} -
-
-
- ) -} +import styles from './index.module.scss' export const Header = () => { - const [isOpenMenu, setIsOpenMenu] = useState(false) + const [isMenuOpen, setIsMenuOpen] = useState(false) - const handleOpen = useMemo( - () => - function () { - if (window.innerWidth <= 1024) setIsOpenMenu(true) - }, - [] - ) + const TopProps = { + handleClickOpen: useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsMenuOpen(true) + }, + [] + ), + } - const handleClose = useMemo( - () => - function () { - if (window.innerWidth <= 1024) setIsOpenMenu(false) - }, - [] - ) + const BottomProps = { + isMenuOpen, + handleClose: useMemo( + () => + function () { + if (window.innerWidth <= 1024) setIsMenuOpen(false) + }, + [] + ), + } return ( -
-