From 751b9307c391289dab7507f9e0985ca50ff457ba Mon Sep 17 00:00:00 2001 From: Rallenson Date: Sat, 7 Jan 2023 21:25:03 -0300 Subject: [PATCH] feat(header): header mobile completo e resonpsivo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit criação do subemenu concluida, header mobile,desktop e 4k respnsivo e correção do height do header --- desafio-5/public/index.html | 4 +- desafio-5/src/Modal/Submenu.scss | 84 +++++++++++++++++++ desafio-5/src/Modal/submenuModal.tsx | 61 ++++++++++++++ .../src/components/assets/icons/close.svg | 4 + .../src/components/modules/header.module.scss | 13 +-- desafio-5/src/components/scripts/header.tsx | 17 +++- desafio-5/src/contexts/SubmenuContext.tsx | 22 +++++ desafio-5/src/index.tsx | 6 +- 8 files changed, 199 insertions(+), 12 deletions(-) create mode 100644 desafio-5/src/Modal/Submenu.scss create mode 100644 desafio-5/src/Modal/submenuModal.tsx create mode 100644 desafio-5/src/components/assets/icons/close.svg create mode 100644 desafio-5/src/contexts/SubmenuContext.tsx diff --git a/desafio-5/public/index.html b/desafio-5/public/index.html index b3ac7e4..198333f 100644 --- a/desafio-5/public/index.html +++ b/desafio-5/public/index.html @@ -8,7 +8,7 @@ name="description" content="Web site created using create-react-app" /> - React App + Desafio-5 @@ -19,7 +19,7 @@ diff --git a/desafio-5/src/Modal/Submenu.scss b/desafio-5/src/Modal/Submenu.scss new file mode 100644 index 0000000..141561a --- /dev/null +++ b/desafio-5/src/Modal/Submenu.scss @@ -0,0 +1,84 @@ +@import "../components/utils/Variables.scss"; + +.Submenu-wrapper.opened { + opacity: 1; + pointer-events: all; +} +.Submenu-wrapper-overlay.opened { + opacity: 1; + pointer-events: all; +} +.Submenu-wrapper-menu.opened{ + transform: translateX(0); +} +.Submenu-wrapper{ + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + + display: flex; + align-items: flex-start; + z-index: 2; + opacity: 0; + pointer-events: none; + transition: all 0.4s ease-in-out; + + &-menu{ + background: $-white; + width: 100%; + margin-right: 36px ; + height: 100%; + max-height: 585px; + z-index: 3; + transform: translateX(-100%); + transition: all 0.486s ease-in-out; + &-header{ + display: flex; + justify-content: space-between; + padding: 32px 16px; + background: black; + width: 100%; + height: 80px; + button{ + color: $-white; + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + } + } + &-options{ + nav{ + padding: 32px 16px; + ul{ + li{ + margin-bottom: 12px; + button{ + color:$-gray-300; + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 16px; + } + } + } + } + } + } + &-overlay{ + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 1; + opacity: 0; + pointer-events: none; + transition: all 0.4s ease-in-out; + background: rgba(0, 0, 0, 0.8); + } +} \ No newline at end of file diff --git a/desafio-5/src/Modal/submenuModal.tsx b/desafio-5/src/Modal/submenuModal.tsx new file mode 100644 index 0000000..6509e54 --- /dev/null +++ b/desafio-5/src/Modal/submenuModal.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import "./Submenu.scss" + +import close from "../components/assets/icons/close.svg"; + +interface SUbmenuProps { + isOpened: boolean, + setisOpened: React.Dispatch> +} + +const Submenu = ({isOpened, setisOpened } : SUbmenuProps) => { + + return ( +
+
+
+ + + + + + + {setisOpened(false)}} + className={ `Submenu-wrapper-menu-header-close ${isOpened && "opened"} ` } + src={close} + alt="close_icon" + /> + +
+
+ +
+
+
{setisOpened(false)}} className={`Submenu-wrapper-overlay ${isOpened && "opened"} `}/> +
+ ) + +} + +export {Submenu} \ No newline at end of file diff --git a/desafio-5/src/components/assets/icons/close.svg b/desafio-5/src/components/assets/icons/close.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/desafio-5/src/components/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss index 5c89b5a..234fa19 100644 --- a/desafio-5/src/components/modules/header.module.scss +++ b/desafio-5/src/components/modules/header.module.scss @@ -9,8 +9,8 @@ flex-direction: column; justify-content: space-between; height: 22.225vh; - max-height: 160px; - + min-height: 120px; + max-height: 120px; &-mobileTop{ display: none; } @@ -40,7 +40,7 @@ } &-Searchbox{ width: 24.445%; - height: 5.926vh; + height: 5.334vh; max-width: 514.62px; max-height: 56px; position: relative; @@ -69,7 +69,7 @@ right: 0; margin: 2.652% 16px; width: 6.82%; - height: 72%; + height: 56.25%; img{ width: 100%; } @@ -221,7 +221,8 @@ .Header_wrapper { height: 25.93vh; - max-height: 100%; + max-height: 140px; + justify-content: flex-start; // Top-header-mobile &-mobileTop { @@ -231,6 +232,7 @@ padding: 25px 16px; gap: 10px; height: 16.297vh; + max-height: 78px; &-menu{ border: none; min-height: 22.5px; @@ -266,6 +268,7 @@ &-Searchbox{ width: 100%; height: 6.669vh; + max-height: 36px; position: relative; display: flex; align-items: flex-start; diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx index 067f9bb..02ac0d5 100644 --- a/desafio-5/src/components/scripts/header.tsx +++ b/desafio-5/src/components/scripts/header.tsx @@ -1,6 +1,10 @@ import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react" +import { Submenu } from "../../Modal/submenuModal"; +import {SubmenuContext} from "../../contexts/SubmenuContext"; + import HeaderStyles from "../modules/header.module.scss" + import Logo from '../assets/imgs/Logo.png'; import LogoMobile from '../assets/imgs/Logo-M3Academy-mobile.png'; import Lupa from "../assets/icons/search_Icon_desk.svg"; @@ -8,9 +12,11 @@ import Cart from "../assets/icons/cart_desk_icon.svg"; import MenuMobile from "../assets/icons/Hamburger_menu.svg"; const Header = () =>{ + + const { isOpened, setisOpened } = useContext(SubmenuContext) + return (
-
@@ -36,7 +42,13 @@ const Header = () =>{ -
diff --git a/desafio-5/src/contexts/SubmenuContext.tsx b/desafio-5/src/contexts/SubmenuContext.tsx new file mode 100644 index 0000000..bf9924d --- /dev/null +++ b/desafio-5/src/contexts/SubmenuContext.tsx @@ -0,0 +1,22 @@ +import { useState, createContext } from "react"; + +interface SubmenuData { + isOpened:boolean, + setisOpened: React.Dispatch>, + +} + +export const SubmenuContext = createContext({} as SubmenuData) + +export const SubmenuProvider: React.FC<{ children: React.ReactNode }> = ({children}) => { + + const [isOpened, setisOpened] = useState(false) + + return( + + {children} + + ); +}; \ No newline at end of file diff --git a/desafio-5/src/index.tsx b/desafio-5/src/index.tsx index 3f3d866..97d16c5 100644 --- a/desafio-5/src/index.tsx +++ b/desafio-5/src/index.tsx @@ -3,17 +3,19 @@ import ReactDOM from 'react-dom/client'; import { Home } from './pages/home'; import { Header } from './components/scripts/header'; import { Footer } from './components/scripts/footer'; +import {SubmenuProvider} from "./contexts/SubmenuContext" import './components/Main.scss'; import './components/common/global.scss'; import './components/common/resets.scss' - const rootElement = document.getElementById('root'); const rootheader = document.getElementById('rootheader'); const rootfooter = document.getElementById('rootfooter'); if (rootheader) { ReactDOM.createRoot(rootheader).render( -
+ +
+ ); } else { // rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.