diff --git a/react-project/package-lock.json b/react-project/package-lock.json
index 128dd0d..f310550 100644
--- a/react-project/package-lock.json
+++ b/react-project/package-lock.json
@@ -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",
diff --git a/react-project/package.json b/react-project/package.json
index 081aa34..8d8bcc3 100644
--- a/react-project/package.json
+++ b/react-project/package.json
@@ -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",
diff --git a/react-project/src/App.tsx b/react-project/src/App.tsx
index 773fa05..6354bed 100644
--- a/react-project/src/App.tsx
+++ b/react-project/src/App.tsx
@@ -1,4 +1,5 @@
import React from "react";
+
import logo from "./logo.svg";
import "../src/assets/styles/global.scss";
import { Institucional } from "./pages/Institucional";
diff --git a/react-project/src/Declarations.d.ts b/react-project/src/Declarations.d.ts
index b614a49..ff21304 100644
--- a/react-project/src/Declarations.d.ts
+++ b/react-project/src/Declarations.d.ts
@@ -1 +1,2 @@
declare module "react-text-mask";
+declare module "react-modal";
diff --git a/react-project/src/assets/images/svgs/close.svg b/react-project/src/assets/images/svgs/close.svg
new file mode 100644
index 0000000..e0e6d36
--- /dev/null
+++ b/react-project/src/assets/images/svgs/close.svg
@@ -0,0 +1,4 @@
+
diff --git a/react-project/src/assets/images/svgs/hamburguer.svg b/react-project/src/assets/images/svgs/hamburguer.svg
new file mode 100644
index 0000000..6cadeb3
--- /dev/null
+++ b/react-project/src/assets/images/svgs/hamburguer.svg
@@ -0,0 +1,5 @@
+
diff --git a/react-project/src/assets/styles/global.scss b/react-project/src/assets/styles/global.scss
index 4135aca..e190d3c 100644
--- a/react-project/src/assets/styles/global.scss
+++ b/react-project/src/assets/styles/global.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/react-project/src/assets/styles/modules/Hambuguer.module.scss b/react-project/src/assets/styles/modules/Hambuguer.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/react-project/src/assets/styles/modules/Header.module.scss b/react-project/src/assets/styles/modules/Header.module.scss
index f63576c..a409448 100644
--- a/react-project/src/assets/styles/modules/Header.module.scss
+++ b/react-project/src/assets/styles/modules/Header.module.scss
@@ -71,6 +71,7 @@ header {
}
.menu {
+ display: none;
margin-left: 100px;
margin-right: 100px;
display: flex;
diff --git a/react-project/src/components/Header.tsx b/react-project/src/components/Header.tsx
index dbf2bc3..b8929a8 100644
--- a/react-project/src/components/Header.tsx
+++ b/react-project/src/components/Header.tsx
@@ -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 = () => {
+
+
);
};
diff --git a/react-project/src/components/MenuHamburguer.tsx b/react-project/src/components/MenuHamburguer.tsx
new file mode 100644
index 0000000..348e967
--- /dev/null
+++ b/react-project/src/components/MenuHamburguer.tsx
@@ -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 (
+
+
+
+
+
+
+
+