develop #7
50
react-project/package-lock.json
generated
50
react-project/package-lock.json
generated
@ -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",
|
||||
|
@ -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,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
1
react-project/src/Declarations.d.ts
vendored
@ -1 +1,2 @@
|
||||
declare module "react-text-mask";
|
||||
declare module "react-modal";
|
||||
|
4
react-project/src/assets/images/svgs/close.svg
Normal file
4
react-project/src/assets/images/svgs/close.svg
Normal 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>
|
After Width: | Height: | Size: 638 B |
5
react-project/src/assets/images/svgs/hamburguer.svg
Normal file
5
react-project/src/assets/images/svgs/hamburguer.svg
Normal 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>
|
After Width: | Height: | Size: 688 B |
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -71,6 +71,7 @@ header {
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: none;
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
display: flex;
|
||||
|
@ -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
44
react-project/src/components/MenuHamburguer.tsx
Normal 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 };
|
@ -1,5 +1,3 @@
|
||||
import React from "react";
|
||||
|
||||
import "../assets/styles/variables.scss";
|
||||
|
||||
import { Header } from "../components/Header";
|
||||
|
Loading…
Reference in New Issue
Block a user