From 2f566464a224c6e7775b260336bdfbc97ade7a2b Mon Sep 17 00:00:00 2001 From: WillSimao Date: Wed, 4 Jan 2023 10:03:34 -0300 Subject: [PATCH] feat(Header): Inicia menu mobile --- react-ts/package-lock.json | 77 +++++++++++++++++++ react-ts/package.json | 2 + react-ts/src/Pages/Home/Home.scss | 0 react-ts/src/Pages/Home/Home.tsx | 7 +- react-ts/src/assets/images/CloseMobile.svg | 4 + react-ts/src/assets/images/OpenMobile.svg | 5 ++ .../{Header.scss => Header.module.scss} | 11 +++ react-ts/src/components/Header/Header.tsx | 28 +++---- .../HeaderMobile/HeaderMobile.module.scss | 17 ++++ .../components/HeaderMobile/HeaderMobile.tsx | 30 ++++++++ ...putSearch.scss => InputSearch.module.scss} | 8 ++ .../components/InputSearch/InputSearch.tsx | 8 +- .../MenuMobile/Component.module.scss | 44 +++++++++++ .../components/MenuMobile/ComponentMobile.tsx | 32 ++++++++ .../MenuMobile/MenuMobile.module.scss | 13 ++++ .../src/components/MenuMobile/MenuMobile.tsx | 25 ++++++ .../src/components/UserAccount/UseAccount.tsx | 12 +-- ...erAccount.scss => UserAccount.module.scss} | 10 +++ 18 files changed, 306 insertions(+), 27 deletions(-) delete mode 100644 react-ts/src/Pages/Home/Home.scss create mode 100644 react-ts/src/assets/images/CloseMobile.svg create mode 100644 react-ts/src/assets/images/OpenMobile.svg rename react-ts/src/components/Header/{Header.scss => Header.module.scss} (88%) create mode 100644 react-ts/src/components/HeaderMobile/HeaderMobile.module.scss create mode 100644 react-ts/src/components/HeaderMobile/HeaderMobile.tsx rename react-ts/src/components/InputSearch/{InputSearch.scss => InputSearch.module.scss} (86%) create mode 100644 react-ts/src/components/MenuMobile/Component.module.scss create mode 100644 react-ts/src/components/MenuMobile/ComponentMobile.tsx create mode 100644 react-ts/src/components/MenuMobile/MenuMobile.module.scss create mode 100644 react-ts/src/components/MenuMobile/MenuMobile.tsx rename react-ts/src/components/UserAccount/{UserAccount.scss => UserAccount.module.scss} (83%) diff --git a/react-ts/package-lock.json b/react-ts/package-lock.json index d99aae9..3de805e 100644 --- a/react-ts/package-lock.json +++ b/react-ts/package-lock.json @@ -14,7 +14,9 @@ "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-modal": "^3.13.1", "@vitejs/plugin-react": "^3.0.0", + "react-modal": "^3.16.1", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0" @@ -800,6 +802,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/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", @@ -1061,6 +1072,12 @@ "node": ">=0.8.0" } }, + "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==", + "dev": true + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -1298,6 +1315,15 @@ "node": ">=0.10.0" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1346,6 +1372,17 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -1369,6 +1406,37 @@ "react": "^18.2.0" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + }, + "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==", + "dev": true + }, + "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==", + "dev": true, + "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.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -1599,6 +1667,15 @@ } } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/react-ts/package.json b/react-ts/package.json index 74f5946..1cf4c69 100644 --- a/react-ts/package.json +++ b/react-ts/package.json @@ -15,7 +15,9 @@ "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-modal": "^3.13.1", "@vitejs/plugin-react": "^3.0.0", + "react-modal": "^3.16.1", "sass": "^1.57.1", "typescript": "^4.9.3", "vite": "^4.0.0" diff --git a/react-ts/src/Pages/Home/Home.scss b/react-ts/src/Pages/Home/Home.scss deleted file mode 100644 index e69de29..0000000 diff --git a/react-ts/src/Pages/Home/Home.tsx b/react-ts/src/Pages/Home/Home.tsx index f1febf0..943722c 100644 --- a/react-ts/src/Pages/Home/Home.tsx +++ b/react-ts/src/Pages/Home/Home.tsx @@ -1,11 +1,12 @@ - -import './Home.scss' - import Header from '../../components/Header/Header' +import HeaderMobile from '../../components/HeaderMobile/HeaderMobile' const Home = () => { return ( + <>
+ + ) } diff --git a/react-ts/src/assets/images/CloseMobile.svg b/react-ts/src/assets/images/CloseMobile.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/react-ts/src/assets/images/CloseMobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/react-ts/src/assets/images/OpenMobile.svg b/react-ts/src/assets/images/OpenMobile.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/react-ts/src/assets/images/OpenMobile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/react-ts/src/components/Header/Header.scss b/react-ts/src/components/Header/Header.module.scss similarity index 88% rename from react-ts/src/components/Header/Header.scss rename to react-ts/src/components/Header/Header.module.scss index 99da846..c782af5 100644 --- a/react-ts/src/components/Header/Header.scss +++ b/react-ts/src/components/Header/Header.module.scss @@ -41,6 +41,17 @@ } } } +@media only screen and (max-width: 1024px) { + .header { + display: none; + &__wrapper-top { + padding: 25px 16px; + } + &__wrapper-botom { + display: none; + } + } +} @media only screen and (min-width: 2500px) { .header { diff --git a/react-ts/src/components/Header/Header.tsx b/react-ts/src/components/Header/Header.tsx index c0a1703..3bdea0e 100644 --- a/react-ts/src/components/Header/Header.tsx +++ b/react-ts/src/components/Header/Header.tsx @@ -1,34 +1,34 @@ -import './Header.scss'; +import styles from './Header.module.scss'; import InputSearch from '../InputSearch/InputSearch'; import UserAccount from '../UserAccount/UseAccount'; import logoM31280 from '../../assets/images/logo-m3academy.svg'; -import logoM32500 from '../../assets/images/logo-m3academy2500.svg'; +import logoM32500 from '../../assets/images/logo-m3academy2500.svg'; const Header = () => { return ( -
-
- - - Logo m3academy +
+ -
-
    -
  • +
    + diff --git a/react-ts/src/components/HeaderMobile/HeaderMobile.module.scss b/react-ts/src/components/HeaderMobile/HeaderMobile.module.scss new file mode 100644 index 0000000..726d1c9 --- /dev/null +++ b/react-ts/src/components/HeaderMobile/HeaderMobile.module.scss @@ -0,0 +1,17 @@ +@import '../../styles/utils/Variables.scss'; + +.headerMobile { + background-color: $color-black1; + padding: 25px 16px; + &__logo-cart { + display: flex; + align-items: center; + justify-content: space-between; + } +} + +@media only screen and (min-width: 1025px) { + .headerMobile { + display: none; + } +} \ No newline at end of file diff --git a/react-ts/src/components/HeaderMobile/HeaderMobile.tsx b/react-ts/src/components/HeaderMobile/HeaderMobile.tsx new file mode 100644 index 0000000..78131f1 --- /dev/null +++ b/react-ts/src/components/HeaderMobile/HeaderMobile.tsx @@ -0,0 +1,30 @@ +import styles from './HeaderMobile.module.scss'; + +import MenuMobile from '../MenuMobile/MenuMobile'; + +import InputSearch from '../InputSearch/InputSearch'; +import logoM31280 from '../../assets/images/logo-m3academy.svg'; +import CartHeader from '../../assets/images/cart-header.svg'; + +const HeaderMobile = () => { + return ( +
    +
    + + + Logo m3Academy + + +
    + +
    + ) +} + +export default HeaderMobile \ No newline at end of file diff --git a/react-ts/src/components/InputSearch/InputSearch.scss b/react-ts/src/components/InputSearch/InputSearch.module.scss similarity index 86% rename from react-ts/src/components/InputSearch/InputSearch.scss rename to react-ts/src/components/InputSearch/InputSearch.module.scss index e83d3b7..4e31135 100644 --- a/react-ts/src/components/InputSearch/InputSearch.scss +++ b/react-ts/src/components/InputSearch/InputSearch.module.scss @@ -31,6 +31,14 @@ } } +@media only screen and (max-width: 1024px) { + .wrapper-iconSearch { + max-width: 992px; + width: 100%; + margin-top: 25px; + } +} + @media only screen and (min-width: 2500px) { .wrapper-iconSearch { max-width: 515.62px; diff --git a/react-ts/src/components/InputSearch/InputSearch.tsx b/react-ts/src/components/InputSearch/InputSearch.tsx index bfdefa0..86e389e 100644 --- a/react-ts/src/components/InputSearch/InputSearch.tsx +++ b/react-ts/src/components/InputSearch/InputSearch.tsx @@ -1,13 +1,13 @@ -import './InputSearch.scss'; +import styles from './InputSearch.module.scss'; import IconSearch from '../../assets/images/icon-Search.svg'; const InputSearch = () => { return ( -
    - - Icone de pesquisa +
    + + Icone de pesquisa
    ) } diff --git a/react-ts/src/components/MenuMobile/Component.module.scss b/react-ts/src/components/MenuMobile/Component.module.scss new file mode 100644 index 0000000..ec043f8 --- /dev/null +++ b/react-ts/src/components/MenuMobile/Component.module.scss @@ -0,0 +1,44 @@ +@import '../../styles/utils/Variables.scss'; + +.container-components { + z-index: 5; + top: 0%; + left: 0%; + position: absolute; + max-width: 988px; + width: 100%; + height: 585px; + transition: all linear 500ms; + &__logon { + width: 100%; + display: flex; + justify-content: space-between; + background-color: $color-black1; + padding: 31px 16px; + button { + background: transparent; + border: none; + } + } + &__ul { + width: 100%; + height: 100%; + position: absolute; + display: flex; + flex-direction: column; + row-gap: 12px; + background-color: $color-white1; + padding: 31px 16px; + &__li { + a { + font-family: $font-family; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: $color-grey1; + } + } + } +} \ No newline at end of file diff --git a/react-ts/src/components/MenuMobile/ComponentMobile.tsx b/react-ts/src/components/MenuMobile/ComponentMobile.tsx new file mode 100644 index 0000000..c63f7b6 --- /dev/null +++ b/react-ts/src/components/MenuMobile/ComponentMobile.tsx @@ -0,0 +1,32 @@ +import { useState } from 'react'; + +import styles from './Component.module.scss'; + +import UserAccount from '../UserAccount/UseAccount'; +import CloseMobile from '../../assets/images/CloseMobile.svg'; + + +const MenuComponent = () => { + + return ( +
    +
    + + +
    + +
    + ) +} + +export default MenuComponent; \ No newline at end of file diff --git a/react-ts/src/components/MenuMobile/MenuMobile.module.scss b/react-ts/src/components/MenuMobile/MenuMobile.module.scss new file mode 100644 index 0000000..d99b556 --- /dev/null +++ b/react-ts/src/components/MenuMobile/MenuMobile.module.scss @@ -0,0 +1,13 @@ +@import '../../styles/utils/Variables.scss'; + +.container-modal { + &__button { + display: flex; + align-items: center; + justify-content: space-between; + button { + background: transparent; + border: none; + } + } +} \ No newline at end of file diff --git a/react-ts/src/components/MenuMobile/MenuMobile.tsx b/react-ts/src/components/MenuMobile/MenuMobile.tsx new file mode 100644 index 0000000..41ef38d --- /dev/null +++ b/react-ts/src/components/MenuMobile/MenuMobile.tsx @@ -0,0 +1,25 @@ +import styles from './MenuMobile.module.scss'; +import { useState } from 'react'; + +import MenuComponent from './ComponentMobile'; + +import OpenMobile from '../../assets/images/OpenMobile.svg'; + +const MenuMobile = () => { + const [IsOpen, setIsOpen] = useState(false); + + function openModal (): void { + setIsOpen(true); + } + + return ( +
    +
    + +
    + {IsOpen ? : Abre Menu } +
    + ) +} + +export default MenuMobile; \ No newline at end of file diff --git a/react-ts/src/components/UserAccount/UseAccount.tsx b/react-ts/src/components/UserAccount/UseAccount.tsx index cdbb1bf..706c5bf 100644 --- a/react-ts/src/components/UserAccount/UseAccount.tsx +++ b/react-ts/src/components/UserAccount/UseAccount.tsx @@ -1,17 +1,17 @@ -import './UserAccount.scss'; +import styles from './UserAccount.module.scss'; import CartHeader from '../../assets/images/cart-header.svg'; const UserAccount = () => { return ( -
    -
      -
    • +
      + diff --git a/react-ts/src/components/UserAccount/UserAccount.scss b/react-ts/src/components/UserAccount/UserAccount.module.scss similarity index 83% rename from react-ts/src/components/UserAccount/UserAccount.scss rename to react-ts/src/components/UserAccount/UserAccount.module.scss index a24f71f..7821f32 100644 --- a/react-ts/src/components/UserAccount/UserAccount.scss +++ b/react-ts/src/components/UserAccount/UserAccount.module.scss @@ -20,6 +20,16 @@ } } +@media only screen and (max-width: 1024px) { + .wrapper-userAccount { + &__ul { + &__li-cart { + display: none; + } + } + } +} + @media only screen and (min-width: 2500px) { .wrapper-userAccount { &__ul {