forked from M3-Academy/desafio-react-e-typescript
feat(Header): Menu hamburguer funcional com modal, falta estilização. #4
@ -3,11 +3,23 @@ import styles from '../../styles/Header.module.scss'
|
||||
import logo from '../../assets/img/logo.png'
|
||||
import search from '../../assets/img/search.png'
|
||||
import cart from '../../assets/img/cart.png'
|
||||
import menuhamb from '../../assets/img/menu-hamburguer.png'
|
||||
|
||||
const Header = () => {
|
||||
interface MenuProps {
|
||||
handleOpenModal:() => void;
|
||||
}
|
||||
|
||||
const Header = ({handleOpenModal} : MenuProps) => {
|
||||
return(
|
||||
<header>
|
||||
<div className={styles['header__top']}>
|
||||
<div className={styles['header__menu']}>
|
||||
<button
|
||||
onClick={handleOpenModal}
|
||||
>
|
||||
<img src={menuhamb} alt=''/>
|
||||
</button>
|
||||
</div>
|
||||
<img className={styles['header__logo']} src={logo} alt=''></img>
|
||||
<div className={styles['header__container-input']}>
|
||||
<img className={styles['header__search-icon']} src={search} alt=''/>
|
||||
|
25
src/components/header/Menu.tsx
Normal file
25
src/components/header/Menu.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
|
||||
import Modal from 'react-modal'
|
||||
import styles from '../../styles/Menu.module.scss'
|
||||
|
||||
interface MenuProps {
|
||||
isOpen: boolean;
|
||||
onRequestClose: () => void;
|
||||
}
|
||||
|
||||
function Menu ({isOpen, onRequestClose}: MenuProps) {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onRequestClose={onRequestClose}
|
||||
overlayClassName={styles['menu-hamb']}
|
||||
className={styles['menu']}
|
||||
>
|
||||
<p>Entrar</p>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default Menu
|
@ -3,8 +3,7 @@
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
|
||||
.footer__newsletter{
|
||||
display: flex;
|
||||
|
16
src/styles/Menu.module.scss
Normal file
16
src/styles/Menu.module.scss
Normal file
@ -0,0 +1,16 @@
|
||||
.menu{
|
||||
background: white;
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
}
|
||||
|
||||
|
||||
.menu-hamb {
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding-right: 36px;
|
||||
}
|
Loading…
Reference in New Issue
Block a user