forked from M3-Academy/desafio-react-e-typescript
feat(header): header mobile completo e resonpsivo
criação do subemenu concluida, header mobile,desktop e 4k respnsivo e correção do height do header
This commit is contained in:
parent
b39abcf8b5
commit
751b9307c3
@ -8,7 +8,7 @@
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<title>React App</title>
|
||||
<title>Desafio-5</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
</main>
|
||||
<footer id="rootfooter">
|
||||
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
84
desafio-5/src/Modal/Submenu.scss
Normal file
84
desafio-5/src/Modal/Submenu.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
61
desafio-5/src/Modal/submenuModal.tsx
Normal file
61
desafio-5/src/Modal/submenuModal.tsx
Normal file
@ -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<React.SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
const Submenu = ({isOpened, setisOpened } : SUbmenuProps) => {
|
||||
|
||||
return (
|
||||
<div className={`Submenu-wrapper ${isOpened && "opened"} `}>
|
||||
<div className={`Submenu-wrapper-menu ${isOpened && "opened"} `}>
|
||||
<div className="Submenu-wrapper-menu-header">
|
||||
<span>
|
||||
<a href="/">
|
||||
<button>
|
||||
ENTRAR
|
||||
</button>
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
<img
|
||||
onClick={() => {setisOpened(false)}}
|
||||
className={ `Submenu-wrapper-menu-header-close ${isOpened && "opened"} ` }
|
||||
src={close}
|
||||
alt="close_icon"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="Submenu-wrapper-menu-options" >
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">
|
||||
<button>CURSOS</button>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">
|
||||
<button>SAIBA MAIS</button>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">
|
||||
<button>INSTITUCIONAIS</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div onClick={() => {setisOpened(false)}} className={`Submenu-wrapper-overlay ${isOpened && "opened"} `}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export {Submenu}
|
||||
4
desafio-5/src/components/assets/icons/close.svg
Normal file
4
desafio-5/src/components/assets/icons/close.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.2284 1.28215L1.22996 10.9942C0.550673 11.6541 0.568968 12.7044 1.27083 13.3401C1.97268 13.9759 3.09232 13.9564 3.77161 13.2966L13.77 3.58449C14.4493 2.92466 14.431 1.87436 13.7292 1.23858C13.0273 0.602806 11.9077 0.622311 11.2284 1.28215Z" fill="white"/>
|
||||
<path d="M1.65213 3.40819L10.8751 13.7186C11.5082 14.4263 12.6262 14.5239 13.3724 13.9366C14.1185 13.3493 14.2102 12.2995 13.5771 11.5918L4.35414 1.28143C3.72107 0.573715 2.603 0.476092 1.85686 1.06338C1.11072 1.65067 1.01906 2.70048 1.65213 3.40819Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
@ -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;
|
||||
|
||||
@ -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 (
|
||||
<div className={HeaderStyles["Header_wrapper"]}>
|
||||
|
||||
<div className={HeaderStyles["Header_wrapper-top"]}>
|
||||
<fieldset className={HeaderStyles["Header_wrapper-top-logo"]}>
|
||||
<a href="/">
|
||||
@ -36,7 +42,13 @@ const Header = () =>{
|
||||
|
||||
<div className={HeaderStyles["Header_wrapper-mobileTop"]}>
|
||||
<fieldset className={HeaderStyles["Header_wrapper-mobileTop-menu"]}>
|
||||
<img className={HeaderStyles["hamburguer"]} src={MenuMobile} alt="Logo-mobile" />
|
||||
<img
|
||||
onClick={() => {setisOpened(true)}}
|
||||
className={HeaderStyles["hamburguer"]}
|
||||
src={MenuMobile}
|
||||
alt="Logo-mobile"
|
||||
/>
|
||||
<Submenu isOpened={isOpened} setisOpened={setisOpened}/>
|
||||
</fieldset>
|
||||
<fieldset className={HeaderStyles["Header_wrapper-mobileTop-logo"]}>
|
||||
<a href="/">
|
||||
@ -47,7 +59,6 @@ const Header = () =>{
|
||||
<img src={Cart} alt="Carrinho_icon" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
|
||||
|
||||
<div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
|
||||
|
||||
22
desafio-5/src/contexts/SubmenuContext.tsx
Normal file
22
desafio-5/src/contexts/SubmenuContext.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import { useState, createContext } from "react";
|
||||
|
||||
interface SubmenuData {
|
||||
isOpened:boolean,
|
||||
setisOpened: React.Dispatch<React.SetStateAction<boolean>>,
|
||||
|
||||
}
|
||||
|
||||
export const SubmenuContext = createContext({} as SubmenuData)
|
||||
|
||||
export const SubmenuProvider: React.FC<{ children: React.ReactNode }> = ({children}) => {
|
||||
|
||||
const [isOpened, setisOpened] = useState(false)
|
||||
|
||||
return(
|
||||
<SubmenuContext.Provider
|
||||
value = { { isOpened: isOpened, setisOpened:setisOpened} }
|
||||
>
|
||||
{children}
|
||||
</SubmenuContext.Provider>
|
||||
);
|
||||
};
|
||||
@ -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(
|
||||
<Header />
|
||||
<SubmenuProvider>
|
||||
<Header />
|
||||
</SubmenuProvider>
|
||||
);
|
||||
} else {
|
||||
// rootElement não foi encontrado. Talvez seja necessário aguardar o carregamento da página.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user