ueberjames/desafio-react-e-typescript-ueber-james
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

criação do layout do mobile >375px e adicina algoritimo para fecha menu

Browse Source
This commit is contained in:
Ueber James Santos 2023-01-05 17:46:13 -03:00
parent 300ffe4390
commit fc065c2999
4 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
desafio-5/src/assets/icones/fechaHamburgue.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

4
desafio-5/src/components/Header/SubMenu.tsx
View File

@ -1,6 +1,7 @@
import React, { useContext } from "react";
import style from "../../styles/header/submenu.module.scss";
import { HeaderContext } from "../../contexts/HeaderContext";
import fechaIcon from "../../assets/icones/fechaHamburgue.svg";
@ -42,6 +43,9 @@ const Submenu = () => {
>
<a className={style["submenu-link-entre"]} href="#">
ENTRAR
<img src={fechaIcon} alt="" onClick={() => menu(false)} />
</a>
<a className={style["submenu-link"]} href="#">
CURSOS

6
desafio-5/src/styles/header/header.module.scss
View File

@ -2,8 +2,4 @@
background-color: var(--black-600);
padding-top: 22px ;
}
@media screen and (max-width: 768px) {
.header{
padding: 30px 0 16px;
}
}

12
desafio-5/src/styles/header/submenu.module.scss
View File

@ -106,6 +106,7 @@
.submenu-links--mobile .submenu-link {
width: 100%;
padding: 10px 0;
padding: 0 0 12px 16px;
// text-align: center;
color: var(--gray-400);
@ -115,8 +116,8 @@
.submenu-link-entre {
width: 100%;
margin-bottom: 31px;
padding: 31px 0 31px 16px;
background-color: var(--black-600);
font-weight: 400;
@ -127,6 +128,13 @@
color: var(--gray-400);
color: #FFFFFF;
text-decoration: none;
img {
position: absolute;
right: 12px;
}
}
.submenu--absolute.is-open {