From 2704bbea3ea68f06f527a26a22500bdc3aded318 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 10 Jan 2023 23:23:23 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20do=20modal=20do=20h?= =?UTF-8?q?eader=20e=20adi=C3=A7=C3=A3o=20do=20scss=20do=20main=20containe?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- desafio-react-e-typescript/src/App.scss | 11 +++ desafio-react-e-typescript/src/App.tsx | 10 ++- .../Container-menu/TopContainer.modules.scss | 37 ++++++++ .../Container-menu/TopContainer.tsx | 23 +++++ ...{ModalHeader.tsx => ContentMenuHeader.tsx} | 4 +- .../Header/HeaderDesktop.modules.scss | 35 +++++--- .../src/components/Header/HeaderDesktop.tsx | 28 ++++-- .../Header/HeaderMobile.modules.scss | 86 ++++++++++++++++++- .../src/components/Header/HeaderMobile.tsx | 12 ++- .../src/components/Modal.tsx | 27 ++++++ .../src/components/Navegation.modules.scss | 25 +++++- .../src/components/Navegation.tsx | 60 ++++++++++--- .../src/components/Variables.scss | 10 +++ .../assets/imgs/SVGs/Close-button.svg | 4 + .../assets/imgs/SVGs/arrow-point-to-right.svg | 10 +++ .../assets/imgs/SVGs/house-icon.svg | 3 + desafio-react-e-typescript/src/router.tsx | 2 - 17 files changed, 344 insertions(+), 43 deletions(-) create mode 100644 desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss create mode 100644 desafio-react-e-typescript/src/components/Container-menu/TopContainer.tsx rename desafio-react-e-typescript/src/components/Header/{ModalHeader.tsx => ContentMenuHeader.tsx} (79%) create mode 100644 desafio-react-e-typescript/src/components/Modal.tsx create mode 100644 desafio-react-e-typescript/src/components/Variables.scss create mode 100644 desafio-react-e-typescript/src/components/assets/imgs/SVGs/Close-button.svg create mode 100644 desafio-react-e-typescript/src/components/assets/imgs/SVGs/arrow-point-to-right.svg create mode 100644 desafio-react-e-typescript/src/components/assets/imgs/SVGs/house-icon.svg diff --git a/desafio-react-e-typescript/src/App.scss b/desafio-react-e-typescript/src/App.scss index d283bb8..189df68 100644 --- a/desafio-react-e-typescript/src/App.scss +++ b/desafio-react-e-typescript/src/App.scss @@ -4,6 +4,17 @@ body { .Container-menu { display: flex; + flex-direction: column; +} + +.TopContainer_wrapper { + display: flex; + flex-direction: column; +} + +.MainConteiner { + display: flex; + max-width: 100%; @media (max-width: 1024px) { flex-direction: column; diff --git a/desafio-react-e-typescript/src/App.tsx b/desafio-react-e-typescript/src/App.tsx index 3f71991..05a8dc7 100644 --- a/desafio-react-e-typescript/src/App.tsx +++ b/desafio-react-e-typescript/src/App.tsx @@ -1,10 +1,12 @@ import React, { useState, useEffect } from "react"; import { Router } from "./router"; +import { Navegation } from "./components/Navegation"; import "./App.scss"; import { HeaderDesktop } from "./components/Header/HeaderDesktop"; import { HeaderMobile } from "./components/Header/HeaderMobile"; +import { TopContainer } from "./components/Container-menu/TopContainer"; export function ScreenSize() { const [windowDimenion, detectHW] = useState({ @@ -35,7 +37,13 @@ export const App = () => { <> {window.innerWidth > 1024 ? : }
- +
+ +
+
+ + +
) diff --git a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss new file mode 100644 index 0000000..a26d048 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss @@ -0,0 +1,37 @@ +@import "../Variables.scss"; + +.TopIcons { + display: flex; + padding: 30px 100px; + align-items: center; + + .Arrow { + margin: 0 9.7px; + } + + .span_top { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-grey; + text-transform: uppercase; + } +} + +.Title_wrapper { + display: flex; + justify-content: center; + + .Title { + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: $color-gray-800; + } +} diff --git a/desafio-react-e-typescript/src/components/Container-menu/TopContainer.tsx b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.tsx new file mode 100644 index 0000000..efec1c2 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Container-menu/TopContainer.tsx @@ -0,0 +1,23 @@ +import { NavLink } from "react-router-dom"; + +import HouseIcon from "../assets/imgs/SVGs/house-icon.svg"; +import Arrow from "../assets/imgs/SVGs/arrow-point-to-right.svg"; + +import "./TopContainer.modules.scss"; + +export const TopContainer = () => { + return ( + <> +
+ + HouseIcon + + Arrow + institucional +
+
+

institucional

+
+ + ); +}; diff --git a/desafio-react-e-typescript/src/components/Header/ModalHeader.tsx b/desafio-react-e-typescript/src/components/Header/ContentMenuHeader.tsx similarity index 79% rename from desafio-react-e-typescript/src/components/Header/ModalHeader.tsx rename to desafio-react-e-typescript/src/components/Header/ContentMenuHeader.tsx index deac66c..a11f752 100644 --- a/desafio-react-e-typescript/src/components/Header/ModalHeader.tsx +++ b/desafio-react-e-typescript/src/components/Header/ContentMenuHeader.tsx @@ -1,9 +1,9 @@ import { NavLink } from "react-router-dom"; -export const ModalHeader = () => { +export const ContentMenuHeader = () => { return ( <> -
+
diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss index 43d9b34..0256f67 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss @@ -1,10 +1,12 @@ +@import "../Variables.scss"; + .HeaderDesktop { display: flex; justify-content: space-between; padding: 22px 100px; - background: #000; - font-family: "Roboto", sans-serif; - border-bottom: 1px solid #c4c4c4; + background: $color-black; + font-family: $fontFamily; + border-bottom: 1px solid $color-grey; .m3LogoWrapper { display: flex; @@ -26,8 +28,9 @@ width: 100%; height: 16px; padding: 8px; - border: 2px solid #f0f0f0; + border: 2px solid $color-white-100; border-radius: 5px; + color: $color-grey; @media (min-width: 2500px) { height: 33px; @@ -35,10 +38,16 @@ } } + .InconWrapper { + position: relative; + height: 18px; + top: 0%; + right: 32px; + cursor: pointer; + } + .SearchIcon { position: absolute; - top: 25%; - right: 16px; } } .Headerlinks { @@ -52,7 +61,7 @@ font-weight: 400; font-size: 14px; line-height: 16px; - color: #fff; + color: $color-white; text-decoration: none; @media (min-width: 2500px) { @@ -72,10 +81,10 @@ } } -.ModalWrapper { +.ContentHeader_wrapper { padding: 14px 100px; - background: #000; - font-family: "Roboto", sans-serif; + background: $color-black; + font-family: $fontFamily; font-style: normal; font-weight: 400; font-size: 14px; @@ -83,10 +92,10 @@ button { margin-right: 53px; - background: #000; + background: $color-black; border: none; - color: #fff; - + color: $color-white; + cursor: pointer; } } diff --git a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx index 8aef014..3291d4c 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx +++ b/desafio-react-e-typescript/src/components/Header/HeaderDesktop.tsx @@ -1,9 +1,11 @@ +import React from "react"; import { NavLink } from "react-router-dom"; + import LogoM3 from "../assets/imgs/SVGs/M3Logo_desktop.svg"; import CartIcon from "../assets/imgs/SVGs/CartIcon_desktop.svg"; import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg"; -import { ModalHeader } from "./ModalHeader"; +import { ContentMenuHeader } from "./ContentMenuHeader"; import "./HeaderDesktop.modules.scss"; @@ -17,15 +19,25 @@ export const HeaderDesktop = () => {
- - - Search-Icon - + +
- {" "} - ENTRAR{" "} + ENTRAR
@@ -35,7 +47,7 @@ export const HeaderDesktop = () => {
- +
); diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss index d99ca9e..b113a5f 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss @@ -1,13 +1,92 @@ +@import "../Variables.scss"; + .HeaderMobile { display: flex; flex-direction: column; padding: 25px 16px; - background: #000000; + background: $color-black; .topHeaderMobile { display: flex; justify-content: space-between; padding-bottom: 25px; + + .ModalWrapper { + position: fixed; + left: 0; + top: 0; + + pointer-events: none; + opacity: 0; + transition: all 0.2s ease-in-out; + + .ModalContent { + z-index: 8; + + .ContentHeader_wrapper { + display: flex; + flex-direction: column; + height: 585px; + background: $color-white; + padding: 31px 16px; + gap: 12px; + z-index: 8; + + button { + color: $color-grey; + background: $color-white; + } + } + } + + .Modaltop { + display: flex; + justify-content: space-between; + padding: 31px 16px; + background: $color-black; + color: $color-white; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + z-index: 8; + + .CloseButton { + border: none; + background: $color-black; + } + } + } + + .ModalWrapper.opened { + display: flex; + flex-direction: column; + width: calc(100% - 36px); + position: fixed; + left: 0; + top: 0; + z-index: 8; + + pointer-events: all; + opacity: 1; + } + + .ModalOuverlay { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; + + background-color: rgba(69, 69, 69, 0.7); + } + } + + .MenuIcon { + background: $color-black; + border: none; } .Search_Header_wrapper { @@ -17,9 +96,10 @@ .Search_Header { width: 100%; height: 36px; - background: #ffffff; - border: 2px solid #f0f0f0; + background: $color-white; + border: 2px solid $color-white-100; border-radius: 5px; + color: $color-grey; } .SearchIcon { diff --git a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx index bad30f6..0f3e88a 100644 --- a/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx +++ b/desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx @@ -1,18 +1,24 @@ +import { useState } from "react"; import { NavLink } from "react-router-dom"; + import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg"; import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg"; import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg"; import SearchIcon from "../assets/imgs/SVGs/search-icon-desktop.svg"; +import { Modal } from "../Modal"; import "./HeaderMobile.modules.scss"; export const HeaderMobile = () => { + const [isOpened, setIsOpened] = useState(false); return ( <>
- {/* ENTRAR */} - + +
LogoM3 @@ -25,7 +31,7 @@ export const HeaderMobile = () => {
- + Search-Icon diff --git a/desafio-react-e-typescript/src/components/Modal.tsx b/desafio-react-e-typescript/src/components/Modal.tsx new file mode 100644 index 0000000..776ed7a --- /dev/null +++ b/desafio-react-e-typescript/src/components/Modal.tsx @@ -0,0 +1,27 @@ +import { ContentMenuHeader } from "./Header/ContentMenuHeader"; + +import CloseIcon from "./assets/imgs/SVGs/Close-button.svg"; + +interface ModalProps { + isOpened: boolean; + setIsOpened: React.Dispatch>; +} + +export const Modal = ({ isOpened, setIsOpened }: ModalProps) => { + return ( + <> +
+
+ ENTRAR + +
+
+ +
+
+
+ + ); +}; diff --git a/desafio-react-e-typescript/src/components/Navegation.modules.scss b/desafio-react-e-typescript/src/components/Navegation.modules.scss index 62549f2..912082e 100644 --- a/desafio-react-e-typescript/src/components/Navegation.modules.scss +++ b/desafio-react-e-typescript/src/components/Navegation.modules.scss @@ -1,3 +1,5 @@ +@import "./Variables.scss"; + .MenuRoutes { padding: 0 16px; @@ -9,8 +11,29 @@ ul { list-style: none; + padding: 0; + border-right: 1px solid $color-black; + + li { + padding: 16px 10px; + margin: 10px 0; + } + + li.active { + background: $color-black; + + a { + color: $color-white; + } + } + a { - color: #7d7d7d; + font-family: $fontFamily; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-grey-500; text-decoration: none; } } diff --git a/desafio-react-e-typescript/src/components/Navegation.tsx b/desafio-react-e-typescript/src/components/Navegation.tsx index b84be17..ae97a3b 100644 --- a/desafio-react-e-typescript/src/components/Navegation.tsx +++ b/desafio-react-e-typescript/src/components/Navegation.tsx @@ -1,28 +1,68 @@ +import { useState } from "react"; import { NavLink } from "react-router-dom"; + import "./Navegation.modules.scss"; export const Navegation = () => { + const [isActive, setIsActive] = useState(false); + + const handlechange = () => { + setIsActive((isActive) => !isActive); + }; + + let toggleClassCheck = isActive ? "active" : ""; + return ( <> diff --git a/desafio-react-e-typescript/src/components/Variables.scss b/desafio-react-e-typescript/src/components/Variables.scss new file mode 100644 index 0000000..1eb8f18 --- /dev/null +++ b/desafio-react-e-typescript/src/components/Variables.scss @@ -0,0 +1,10 @@ +$fontFamily: "Roboto", sans-serif; + +$color-black: #000; + +$color-white: #fff; +$color-white-100: #f0f0f0; + +$color-grey: #c4c4c4; +$color-grey-500: #7d7d7d; +$color-gray-800: #292929; diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Close-button.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Close-button.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/Close-button.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/arrow-point-to-right.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/arrow-point-to-right.svg new file mode 100644 index 0000000..d38e598 --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/arrow-point-to-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/desafio-react-e-typescript/src/components/assets/imgs/SVGs/house-icon.svg b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/house-icon.svg new file mode 100644 index 0000000..7d137cd --- /dev/null +++ b/desafio-react-e-typescript/src/components/assets/imgs/SVGs/house-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-e-typescript/src/router.tsx b/desafio-react-e-typescript/src/router.tsx index 533c57d..216694f 100644 --- a/desafio-react-e-typescript/src/router.tsx +++ b/desafio-react-e-typescript/src/router.tsx @@ -1,5 +1,4 @@ import { Routes, Route } from "react-router-dom"; -import { Navegation } from "./components/Navegation"; import { About } from "./pages/About"; import { Payments } from "./pages/Payments"; @@ -11,7 +10,6 @@ import { Refund } from "./pages/Refund"; export const Router = () => { return ( <> - } /> } />