WilliamSimao/desafio-react-e-typescript-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Header): Finaliza menu mobile

Browse Source
This commit is contained in:
William Simão Cavalcante 2023-01-10 17:26:41 -03:00
parent 829b86c3c6
commit ff01113966
4 changed files with 74 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
react-ts/src/components/MenuMobile/Component.module.scss
View File

@ -1,43 +1,51 @@
@import '../../styles/utils/Variables.scss';
.container-components {
z-index: 5;
top: 0%;
left: 0%;
position: absolute;
max-width: 988px;
width: 100%;
height: 585px;
transition: all linear 500ms;
&__logon {
width: 100%;
display: flex;
justify-content: space-between;
background-color: $color-black1;
padding: 31px 16px;
button {
background: transparent;
border: none;
}
}
&__ul {
width: 100%;
height: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(69, 69, 69, 0.7);
z-index: 1;
&__wrapper {
z-index: 5;
top: 0%;
left: 0%;
position: absolute;
display: flex;
flex-direction: column;
row-gap: 12px;
background-color: $color-white1;
padding: 31px 16px;
&__li {
a {
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $color-grey1;
max-width: 988px;
width: 100%;
height: 585px;
&__logon {
width: 100%;
display: flex;
justify-content: space-between;
background-color: $color-black1;
padding: 31px 16px;
button {
background: transparent;
border: none;
}
}
&__ul {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
row-gap: 12px;
background-color: $color-white1;
padding: 31px 16px;
&__li {
a {
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $color-grey1;
}
}
}
}

36
react-ts/src/components/MenuMobile/ComponentMobile.tsx
View File

@ -4,25 +4,31 @@ import styles from './Component.module.scss';
import UserAccount from '../UserAccount/UseAccount';
import CloseMobile from '../../assets/images/CloseMobile.svg';
const MenuComponent = () => {
interface MenuComponentProps {
closeMenu: () => void;
}
const MenuComponent = ({closeMenu}: MenuComponentProps) => {
return (
<div className={styles['container-components']}>
<div className={styles['container-components__logon']}>
<UserAccount/>
<button><img src={CloseMobile} alt="Fecha Menu"/></button>
<div className={styles['container-components__wrapper']}>
<div className={styles['container-components__wrapper__logon']}>
<UserAccount/>
<button onClick={closeMenu} type='button'><img src={CloseMobile} alt="Fecha Menu"/></button>
</div>
<ul className={styles['container-components__wrapper__ul']}>
<li className={styles['container-components__wrapper__ul__li']}>
<a href="/">Cursos</a>
</li>
<li className={styles['container-components__wrapper__ul__li']}>
<a href="/">Saiba Mais</a>
</li>
<li className={styles['container-components__wrapper__ul__li']}>
<a href="/">Institucionais</a>
</li>
</ul>
</div>
<ul className={styles['container-components__ul']}>
<li className={styles['container-components__ul__li']}>
<a href="/">Cursos</a>
</li>
<li className={styles['container-components__ul__li']}>
<a href="/">Saiba Mais</a>
</li>
<li className={styles['container-components__ul__li']}>
<a href="/">Institucionais</a>
</li>
</ul>
</div>
)
}

10
react-ts/src/components/MenuMobile/MenuMobile.module.scss
View File

@ -1,13 +1,11 @@
@import '../../styles/utils/Variables.scss';
.container-modal {
&__button {
display: flex;
align-items: center;
justify-content: space-between;
button {
button {
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
border: none;
}
}
}

11
react-ts/src/components/MenuMobile/MenuMobile.tsx
View File

@ -12,13 +12,14 @@ const MenuMobile = () => {
const openModal = () => {
setIsOpen(true)
}
const closeModal = () => {
setIsOpen(false)
}
return (
<div className={styles['container-modal']}>
<div className={styles['container-modal__button']}>
<button onClick={openModal}></button>
</div>
{IsOpen ? <MenuComponent/> : <img onClick={openModal} src={OpenMobile} alt="Abre Menu" /> }
<button onClick={openModal}></button>
{IsOpen ? <MenuComponent closeMenu={closeModal} /> : <img onClick={openModal} src={OpenMobile} alt="Abre Menu" /> }
</div>
)
}