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

feat: Cria menu hamburguer

Browse Source
This commit is contained in:
Cainã Milech 2023-01-06 18:50:50 -03:00
parent c87ecd9c6e
commit bdd10a41fc
12 changed files with 173 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
react-project/package-lock.json generated
View File

@ -20,6 +20,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-input-mask": "^2.0.4",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
@ -7827,6 +7828,11 @@
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
},
"node_modules/exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@ -15109,6 +15115,29 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"node_modules/react-modal": {
"version": "3.16.1",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
"dependencies": {
"exenv": "^1.2.0",
"prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.0",
"warning": "^4.0.3"
},
"engines": {
"node": ">=8"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
}
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -24128,6 +24157,11 @@
"strip-final-newline": "^2.0.0"
}
},
"exenv": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
},
"exit": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@ -29264,6 +29298,22 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-modal": {
"version": "3.16.1",
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
"requires": {
"exenv": "^1.2.0",
"prop-types": "^15.7.2",
"react-lifecycles-compat": "^3.0.0",
"warning": "^4.0.3"
}
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

1
react-project/package.json
View File

@ -15,6 +15,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-input-mask": "^2.0.4",
"react-modal": "^3.16.1",
"react-router-dom": "^6.6.1",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",

1
react-project/src/App.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import logo from "./logo.svg";
import "../src/assets/styles/global.scss";
import { Institucional } from "./pages/Institucional";

1
react-project/src/Declarations.d.ts vendored
View File

@ -1 +1,2 @@
declare module "react-text-mask";
declare module "react-modal";

4
react-project/src/assets/images/svgs/close.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

5
react-project/src/assets/images/svgs/hamburguer.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 688 B

63
react-project/src/assets/styles/global.scss
View File

@ -4,3 +4,66 @@
margin: 0;
font-family: var(--font-roboto);
}
.divhamb {
position: relative;
border: 1px solid red;
/*width: 50px;
height: 50px;*/
}
.fundo {
background-color: blue;
border: 10px solid yellow;
}
.modal-content {
position: absolute;
background-color: var(--white);
border: 1px solid green;
width: 97.4609%;
height: 585px;
.modal-top {
display: flex;
justify-content: space-between;
padding: 31px 16px;
background-color: var(--black);
a {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--white);
text-decoration: none;
}
button {
background: none;
border: 0;
display: contents;
cursor: pointer;
img {
width: 15px;
height: 15px;
}
}
}
ul {
padding: 31px 16px;
list-style: none;
li {
margin-bottom: 12px;
a {
color: var(--gray-100);
text-decoration: none;
font-weight: 500;
font-size: 14px;
line-height: 16px;
}
}
}
}

0
react-project/src/assets/styles/modules/Hambuguer.module.scss Normal file
View File

1
react-project/src/assets/styles/modules/Header.module.scss
View File

@ -71,6 +71,7 @@ header {
}
.menu {
display: none;
margin-left: 100px;
margin-right: 100px;
display: flex;

4
react-project/src/components/Header.tsx
View File

@ -7,7 +7,7 @@ import logo from "../assets/images/svgs/logo.svg";
import search from "../assets/images/svgs/search.svg";
import cart from "../assets/images/svgs/cart.svg";
import { Menu } from "./Menu";
import { MenuHamburguer } from "./MenuHamburguer";
interface ISearchType {
search: string;
@ -66,6 +66,8 @@ const Header = () => {
</li>
</ul>
</nav>
<MenuHamburguer />
</header>
);
};

44
react-project/src/components/MenuHamburguer.tsx Normal file
View File

@ -0,0 +1,44 @@
import { useState } from "react";
import Modal from "react-modal";
import close from "../assets/images/svgs/close.svg";
const MenuHamburguer = () => {
const [hambActive, setHamb] = useState(false);
const HambMode = () => {
setHamb(!hambActive);
};
return (
<div className="divhamb">
<button onClick={HambMode}>abrir modal</button>
<Modal
isOpen={hambActive}
onRequestClose={HambMode}
overLayClassName="fundo"
className="modal-content"
>
<div className="modal-top">
<a href="/">ENTRAR</a>
<button onClick={HambMode}>
<img src={close} alt="Botão de fechar menu" />
</button>
</div>
<ul>
<li>
<a href="/">CURSOS</a>
</li>
<li>
<a href="/">SAIBA MAIS</a>
</li>
<li>
<a href="/">INSTITUCIONAIS</a>
</li>
</ul>
</Modal>
</div>
);
};
export { MenuHamburguer };

2
react-project/src/pages/Institucional.tsx
View File

@ -1,5 +1,3 @@
import React from "react";
import "../assets/styles/variables.scss";
import { Header } from "../components/Header";