forked from M3-Academy/desafio-react-e-typescript
feat: criação do modal do header e adição do scss do main container
This commit is contained in:
parent
f8ddd955e2
commit
2704bbea3e
@ -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;
|
||||
|
||||
@ -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 ? <HeaderDesktop /> : <HeaderMobile />}
|
||||
<section className="Container-menu">
|
||||
<Router />
|
||||
<div className="TopContainer_wrapper">
|
||||
<TopContainer />
|
||||
</div>
|
||||
<div className="MainConteiner">
|
||||
<Navegation />
|
||||
<Router />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<>
|
||||
<div className="TopIcons">
|
||||
<NavLink className="HouseIcon" to={"/"}>
|
||||
<img src={HouseIcon} alt="HouseIcon" />
|
||||
</NavLink>
|
||||
<img className="Arrow" src={Arrow} alt="Arrow" />
|
||||
<span className="span_top"> institucional </span>
|
||||
</div>
|
||||
<div className="Title_wrapper">
|
||||
<h1 className="Title"> institucional </h1>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,9 +1,9 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
|
||||
export const ModalHeader = () => {
|
||||
export const ContentMenuHeader = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="ModalWrapper">
|
||||
<div className="ContentHeader_wrapper">
|
||||
<NavLink to={"/"}>
|
||||
<button>CURSOS</button>
|
||||
</NavLink>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = () => {
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="Search_Header_wrapper">
|
||||
<input readOnly className="Search_Header" placeholder="Buscar..." />
|
||||
<NavLink to={""}>
|
||||
<img src={SearchIcon} className="SearchIcon" alt="Search-Icon" />
|
||||
</NavLink>
|
||||
<input
|
||||
name="Search_Header"
|
||||
className="Search_Header"
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<label className="InconWrapper" htmlFor={"Search_Header"}>
|
||||
<img
|
||||
src={SearchIcon}
|
||||
className="SearchIcon"
|
||||
alt="Search-Icon"
|
||||
onClick={() => {
|
||||
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="Headerlinks">
|
||||
<NavLink to={"/"} className="EnterLink">
|
||||
{" "}
|
||||
ENTRAR{" "}
|
||||
ENTRAR
|
||||
</NavLink>
|
||||
<div className="CartIcon_Wrapper">
|
||||
<NavLink to={"/"}>
|
||||
@ -35,7 +47,7 @@ export const HeaderDesktop = () => {
|
||||
</div>
|
||||
</section>
|
||||
<div className="Header_botom">
|
||||
<ModalHeader />
|
||||
<ContentMenuHeader />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<section className="HeaderMobile">
|
||||
<div className="topHeaderMobile">
|
||||
{/* <Link> ENTRAR </Link> */}
|
||||
<img src={MenuHamburguer} alt="" />
|
||||
<Modal isOpened={isOpened} setIsOpened={setIsOpened} />
|
||||
<button className="MenuIcon" onClick={() => setIsOpened(true)}>
|
||||
<img src={MenuHamburguer} alt="" />
|
||||
</button>
|
||||
<div>
|
||||
<NavLink to={"/"}>
|
||||
<img src={LogoM3} alt="LogoM3" className="M3Logo" />
|
||||
@ -25,7 +31,7 @@ export const HeaderMobile = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="Search_Header_wrapper">
|
||||
<input readOnly className="Search_Header" placeholder="Buscar..." />
|
||||
<input className="Search_Header" placeholder="Buscar..." />
|
||||
<NavLink to={""}>
|
||||
<img src={SearchIcon} className="SearchIcon" alt="Search-Icon" />
|
||||
</NavLink>
|
||||
|
||||
27
desafio-react-e-typescript/src/components/Modal.tsx
Normal file
27
desafio-react-e-typescript/src/components/Modal.tsx
Normal file
@ -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<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export const Modal = ({ isOpened, setIsOpened }: ModalProps) => {
|
||||
return (
|
||||
<>
|
||||
<section className={`ModalWrapper ${isOpened && "opened"}`}>
|
||||
<div className="Modaltop">
|
||||
<span> ENTRAR </span>
|
||||
<button className="CloseButton" onClick={() => setIsOpened(false)}>
|
||||
<img src={CloseIcon} alt="CloseIcon" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="ModalContent">
|
||||
<ContentMenuHeader />
|
||||
</div>
|
||||
<div className="ModalOuverlay"></div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<nav className="MenuRoutes">
|
||||
<ul>
|
||||
<li>
|
||||
<ul className="links_wrapper">
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/"}> Sobre </NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to={"/Pagamentos"}> Formas de Pagamento</NavLink>
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/Pagamentos"}> Formas de Pagamento </NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/Entrega"}> Entrega </NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to={"/Segurança"}> Segurança e Privacidade</NavLink>
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/Segurança"}> Segurança e Privacidade </NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink to={"/Contatos"}> Contatos</NavLink>
|
||||
<li
|
||||
className={`Title_links ${toggleClassCheck} `}
|
||||
onClick={() => {
|
||||
handlechange();
|
||||
}}
|
||||
>
|
||||
<NavLink to={"/Contatos"}> Contatos </NavLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
10
desafio-react-e-typescript/src/components/Variables.scss
Normal file
10
desafio-react-e-typescript/src/components/Variables.scss
Normal file
@ -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;
|
||||
@ -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 |
@ -0,0 +1,10 @@
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_310)">
|
||||
<path d="M6.11608 3.60396L2.6762 0.164193C2.45738 -0.0547311 2.10261 -0.0547311 1.8839 0.164193C1.66517 0.382921 1.66517 0.737678 1.8839 0.95639L4.92766 4.00006L1.88398 7.04362C1.66525 7.26244 1.66525 7.61716 1.88398 7.83589C2.10271 8.0547 2.45747 8.0547 2.67629 7.83589L6.11617 4.39607C6.22553 4.28665 6.28015 4.1434 6.28015 4.00008C6.28015 3.85668 6.22543 3.71332 6.11608 3.60396Z" fill="#C4C4C4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_310">
|
||||
<rect width="8" height="8" fill="white" transform="matrix(1 0 0 -1 0 8)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.8326 7.59562L14.6903 6.4533L8.40431 0.167326C8.18118 -0.0557753 7.81942 -0.0557753 7.59628 0.167326L1.31028 6.4533L0.167381 7.59623C-0.0518699 7.82324 -0.0456085 8.185 0.18141 8.40425C0.402871 8.61814 0.753946 8.61814 0.975407 8.40425L1.14226 8.23623V15.4285C1.14226 15.7442 1.3981 16 1.71372 16H14.2857C14.6013 16 14.8572 15.7442 14.8572 15.4285V8.23623L15.0246 8.40368C15.2516 8.62293 15.6134 8.61664 15.8326 8.38965C16.0465 8.16819 16.0465 7.81708 15.8326 7.59562ZM9.71409 14.8571H6.28537V10.2855H9.71409V14.8571ZM13.7142 14.8571H10.857V9.71403C10.857 9.39841 10.6011 9.14256 10.2855 9.14256H5.7139C5.39829 9.14256 5.14244 9.39841 5.14244 9.71403V14.8571H2.28518V7.09334L7.99969 1.3788L13.7142 7.09334V14.8571Z" fill="#C4C4C4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 848 B |
@ -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 (
|
||||
<>
|
||||
<Navegation />
|
||||
<Routes>
|
||||
<Route path="/" element={<About />} />
|
||||
<Route path="/Pagamentos" element={<Payments />} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user