From ba36ffc50fbd28361394e031586accece4b6cd6a Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Mon, 16 Jan 2023 05:54:52 -0300 Subject: [PATCH] Feat(Header):Cria Responsividade do Header para Tv e Mobile, e cria o MenuHamburguer do Mobile --- desafio/package-lock.json | 148 +++++++++++++++++++ desafio/package.json | 5 + desafio/src/assets/svgs/CloseMenuMobile.svg | 4 + desafio/src/assets/svgs/MenuMobile.svg | 5 + desafio/src/components/Footer.tsx | 4 +- desafio/src/components/Header.tsx | 37 ++++- desafio/src/components/ModalMenu.tsx | 44 ++++++ desafio/src/index.tsx | 15 +- desafio/src/pages/Cursos.tsx | 13 ++ desafio/src/pages/Institucionais.tsx | 13 ++ desafio/src/pages/Saibamais.tsx | 13 ++ desafio/src/scss/global.scss | 79 ++++++++++ desafio/src/scss/partials/ModalMenu.scss | 78 ++++++++++ desafio/src/scss/partials/header.module.scss | 71 ++++++++- 14 files changed, 520 insertions(+), 9 deletions(-) create mode 100644 desafio/src/assets/svgs/CloseMenuMobile.svg create mode 100644 desafio/src/assets/svgs/MenuMobile.svg create mode 100644 desafio/src/components/ModalMenu.tsx create mode 100644 desafio/src/pages/Cursos.tsx create mode 100644 desafio/src/pages/Institucionais.tsx create mode 100644 desafio/src/pages/Saibamais.tsx create mode 100644 desafio/src/scss/partials/ModalMenu.scss diff --git a/desafio/package-lock.json b/desafio/package-lock.json index 7237d31..e76779e 100644 --- a/desafio/package-lock.json +++ b/desafio/package-lock.json @@ -19,11 +19,16 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-headless-accordion": "^1.0.2", + "react-modal": "^3.16.1", + "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", "web-vitals": "^2.1.4", "yup": "^0.32.11" + }, + "devDependencies": { + "@types/react-modal": "^3.13.1" } }, "node_modules/@adobe/css-tools": { @@ -3078,6 +3083,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", + "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3868,6 +3881,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -7462,6 +7484,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", @@ -14024,6 +14051,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", @@ -14032,6 +14082,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz", + "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==", + "dependencies": { + "@remix-run/router": "1.2.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz", + "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==", + "dependencies": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -15980,6 +16060,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -18967,6 +19055,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz", + "integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19570,6 +19663,15 @@ "@types/react": "*" } }, + "@types/react-modal": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.13.1.tgz", + "integrity": "sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -22206,6 +22308,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", @@ -26779,11 +26886,44 @@ "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", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz", + "integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==", + "requires": { + "@remix-run/router": "1.2.1" + } + }, + "react-router-dom": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz", + "integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==", + "requires": { + "@remix-run/router": "1.2.1", + "react-router": "6.6.2" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -28219,6 +28359,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/desafio/package.json b/desafio/package.json index 36d526e..6ed91ad 100644 --- a/desafio/package.json +++ b/desafio/package.json @@ -14,6 +14,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-headless-accordion": "^1.0.2", + "react-modal": "^3.16.1", + "react-router-dom": "^6.6.2", "react-scripts": "5.0.1", "sass": "^1.57.1", "typescript": "^4.9.4", @@ -43,5 +45,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react-modal": "^3.13.1" } } diff --git a/desafio/src/assets/svgs/CloseMenuMobile.svg b/desafio/src/assets/svgs/CloseMenuMobile.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/desafio/src/assets/svgs/CloseMenuMobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio/src/assets/svgs/MenuMobile.svg b/desafio/src/assets/svgs/MenuMobile.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/desafio/src/assets/svgs/MenuMobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/desafio/src/components/Footer.tsx b/desafio/src/components/Footer.tsx index 4400e20..077044c 100644 --- a/desafio/src/components/Footer.tsx +++ b/desafio/src/components/Footer.tsx @@ -27,10 +27,10 @@ import linkedinIcon from "../assets/svgs/linkedinIcon.svg" const Footer = () => { return } -const FooterDesk : any = () => { +const FooterPlatforms : any = () => { if (window.innerWidth > 1024){ return <> diff --git a/desafio/src/components/Header.tsx b/desafio/src/components/Header.tsx index 24aba58..b4d591d 100644 --- a/desafio/src/components/Header.tsx +++ b/desafio/src/components/Header.tsx @@ -1,18 +1,32 @@ import React from "react"; +import { ModalMenu } from "./ModalMenu"; import styles from "../scss/partials/header.module.scss" import logo from "../assets/imgs/Image-LogoM3Academy.png" import iconLupa from "../assets/svgs/Vector-Search.svg" import iconCart from "../assets/svgs/Cart-Icon.svg" +import menuMobile from "../assets/svgs/MenuMobile.svg" const Header = () => { return
- - +
} +const HeaderPlatforms : any = () => { + if (window.innerWidth > 1024){ + return <> + + + + }else if (window.innerWidth <= 1024){ + return <> + + + } +} + const HeaderTop = () => { return (
@@ -29,6 +43,25 @@ const HeaderTop = () => {
) }; +const HeaderTopMobile = () => { + return ( +
+ +
+ LogoM3 +
+
+ Entrar + Icone Carrinho +
+
+ + +
+
+ + ) +}; const HeaderBottom = () => { return (
diff --git a/desafio/src/components/ModalMenu.tsx b/desafio/src/components/ModalMenu.tsx new file mode 100644 index 0000000..b031e0d --- /dev/null +++ b/desafio/src/components/ModalMenu.tsx @@ -0,0 +1,44 @@ +import React, {useState} from "react"; +import Modal from 'react-modal'; +import { Link } from "react-router-dom"; + +import menuMobile from "../assets/svgs/MenuMobile.svg" +import closeMenuMobile from "../assets/svgs/CloseMenuMobile.svg" + +Modal.setAppElement('#root'); + +const ModalMenu = () => { + + const [modalIsOpen, setIsOpen] = React.useState(false); + + function openModal() { + setIsOpen(true); + } + + function closeModal() { + setIsOpen(false); + } + + return
+ + +
+ Entrar +
+
+ Cursos + Saiba Mais + Institucional +
+ + +
+} + +export { ModalMenu }; \ No newline at end of file diff --git a/desafio/src/index.tsx b/desafio/src/index.tsx index 8eb4c8a..1238a0a 100644 --- a/desafio/src/index.tsx +++ b/desafio/src/index.tsx @@ -3,10 +3,23 @@ import ReactDOM from 'react-dom/client'; import './scss/global.scss'; import './scss/utils/variables.scss'; +import {BrowserRouter, Routes, Route} from "react-router-dom" import {Home} from "./pages/Home" +import { Cursos } from './pages/Cursos'; +import { Saibamais } from './pages/Saibamais'; +import { Institucionais } from './pages/Institucionais'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); -root.render( ); +root.render( + + + }/> + }/> + }/> + }/> + + + ); diff --git a/desafio/src/pages/Cursos.tsx b/desafio/src/pages/Cursos.tsx new file mode 100644 index 0000000..af4e319 --- /dev/null +++ b/desafio/src/pages/Cursos.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +import { Header } from "../components/Header" +import { Footer } from "../components/Footer" + +const Cursos = () => { + return <> +
+