forked from M3-Academy/desafio-react-e-typescript
feat: criação do header top nas versões mobiles
This commit is contained in:
parent
3ff264152c
commit
860138657d
@ -2,22 +2,23 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;0,700;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<title>React App</title>
|
||||
<title>Desafio React</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,7 +3,8 @@ import React, { useState, useEffect } from "react";
|
||||
import { Router } from "./router";
|
||||
import "./App.scss";
|
||||
|
||||
import { HeaderDesktop } from "./components/HeaderDesktop";
|
||||
import { HeaderDesktop } from "./components/Header/HeaderDesktop";
|
||||
import { HeaderMobile } from "./components/Header/HeaderMobile";
|
||||
|
||||
export function ScreenSize() {
|
||||
const [windowDimenion, detectHW] = useState({
|
||||
@ -24,7 +25,7 @@ export function ScreenSize() {
|
||||
};
|
||||
}, [windowDimenion]);
|
||||
|
||||
return window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>;
|
||||
return window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />;
|
||||
}
|
||||
|
||||
export const App = () => {
|
||||
@ -32,7 +33,7 @@ export const App = () => {
|
||||
ScreenSize(),
|
||||
(
|
||||
<>
|
||||
{window.innerWidth > 1024 ? <HeaderDesktop /> : <h3> Hello World !</h3>}
|
||||
{window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />}
|
||||
|
||||
<section className="Container-menu">
|
||||
<Router />
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 722 B |
Binary file not shown.
|
Before Width: | Height: | Size: 949 B |
@ -0,0 +1,38 @@
|
||||
.HeaderDesktop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 22px 100px;
|
||||
background: #000;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
||||
.m3LogoWrapper {
|
||||
// width: 10.6%;
|
||||
}
|
||||
|
||||
.Search_Header_wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 515px;
|
||||
.Search_Header {
|
||||
width: 100%;
|
||||
height: 57px;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.Headerlinks {
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
.EnterLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import LogoM3 from "../assets/imgs/pngs/Logo-M3Academy.png";
|
||||
import CartIcon from "../assets/imgs/pngs/cart.png";
|
||||
import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_desktop.svg";
|
||||
import CartIcon from "../assets/imgs/SVGs/minicart_desktop.svg";
|
||||
|
||||
import "./HeaderDesktop.modules.scss";
|
||||
|
||||
export const HeaderDesktop = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="Header">
|
||||
<div>
|
||||
<section className="HeaderDesktop">
|
||||
<div className="m3LogoWrapper">
|
||||
<NavLink to={"/"}>
|
||||
<img src={LogoM3} alt="LogoM3" className="M3Logo" />
|
||||
</NavLink>
|
||||
@ -16,8 +16,8 @@ export const HeaderDesktop = () => {
|
||||
<div className="Search_Header_wrapper">
|
||||
<input readOnly className="Search_Header" placeholder="Buscar..." />
|
||||
</div>
|
||||
<div>
|
||||
<NavLink to={"/"}> ENTRAR </NavLink>
|
||||
<div className="Headerlinks">
|
||||
<NavLink to={"/"} className="EnterLink"> ENTRAR </NavLink>
|
||||
<NavLink to={"/"}>
|
||||
<img src={CartIcon} alt="CartIcon" className="CartIcon" />
|
||||
</NavLink>
|
||||
@ -0,0 +1,23 @@
|
||||
.HeaderMobile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px 16px;
|
||||
background: #000000;
|
||||
|
||||
.topHeaderMobile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.Search_Header_wrapper {
|
||||
width: 100%;
|
||||
.Search_Header {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
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 "./HeaderMobile.modules.scss";
|
||||
|
||||
export const HeaderMobile = () => {
|
||||
return (
|
||||
<>
|
||||
<section className="HeaderMobile">
|
||||
<div className="topHeaderMobile">
|
||||
{/* <Link> ENTRAR </Link> */}
|
||||
<img src={MenuHamburguer} alt="" />
|
||||
<div>
|
||||
<NavLink to={"/"}>
|
||||
<img src={LogoM3} alt="LogoM3" className="M3Logo" />
|
||||
</NavLink>
|
||||
</div>
|
||||
<div>
|
||||
<NavLink to={"/"}>
|
||||
<img src={CartIcon} alt="CartIcon" className="CartIcon" />
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
<div className="Search_Header_wrapper">
|
||||
<input readOnly className="Search_Header" placeholder="Buscar..." />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,24 +0,0 @@
|
||||
.Header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 100px;
|
||||
background: #000000;
|
||||
|
||||
.Search_Header_wrapper {
|
||||
width: 100%;
|
||||
.Search_Header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
padding: 22px 100px;
|
||||
|
||||
.Search_Header_wrapper {
|
||||
width: 100%;
|
||||
.Search_Header {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,5 @@
|
||||
<svg width="28" height="23" viewBox="0 0 28 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M26.25 19.0001H1.75002C0.783509 19.0001 0 19.7836 0 20.7501C0 21.7166 0.783508 22.5001 1.75002 22.5001H26.25C27.2165 22.5001 28 21.7166 28 20.7501C28 19.7836 27.2165 19.0001 26.25 19.0001Z" fill="white"/>
|
||||
<path d="M26.25 9.5H1.75002C0.783509 9.5 0 10.2835 0 11.25C0 12.2165 0.783508 13 1.75002 13H26.25C27.2165 13 28 12.2165 28 11.25C28 10.2835 27.2165 9.5 26.25 9.5Z" fill="white"/>
|
||||
<path d="M26.25 0H1.75002C0.783509 0 0 0.783509 0 1.75002C0 2.71652 0.783508 3.50003 1.75002 3.50003H26.25C27.2165 3.50003 28 2.71652 28 1.75002C28 0.783509 27.2165 0 26.25 0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 688 B |
@ -0,0 +1,12 @@
|
||||
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_539)">
|
||||
<path d="M54.3344 7.95273C54.0351 7.57862 53.5819 7.36086 53.1027 7.36086H11.1231L9.9492 2.27412C9.78398 1.55848 9.14672 1.05151 8.41228 1.05151H1.57728C0.706248 1.05151 0 1.75776 0 2.6289C0 3.50004 0.706248 4.20619 1.57728 4.20619H7.15753L15.1259 38.7358C15.291 39.4515 15.9283 39.9585 16.6628 39.9585H48.2656C49.1367 39.9585 49.8428 39.2522 49.8428 38.3812C49.8428 37.51 49.1366 36.8039 48.2656 36.8039H17.9176L16.7044 31.5462H48.3709C49.1086 31.5462 49.7478 31.0348 49.9097 30.3151L54.6416 9.28438C54.7467 8.81682 54.6338 8.32694 54.3344 7.95273Z" fill="white"/>
|
||||
<path d="M23.1338 42.0615C19.9449 42.0615 17.3503 44.6559 17.3503 47.845C17.3503 51.0341 19.9448 53.6285 23.1338 53.6285C26.3228 53.6285 28.9173 51.0341 28.9173 47.845C28.9173 44.6559 26.3229 42.0615 23.1338 42.0615Z" fill="white"/>
|
||||
<path d="M42.0614 42.0615C38.8725 42.0615 36.278 44.6559 36.278 47.845C36.278 51.0341 38.8724 53.6285 42.0614 53.6285C45.2504 53.6285 47.8449 51.0341 47.8449 47.845C47.8449 44.6559 45.2505 42.0615 42.0614 42.0615Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_539">
|
||||
<rect width="54.68" height="54.68" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,5 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
|
||||
<path d="M11.8461 21.5385C10.2132 21.5385 8.88458 22.867 8.88458 24.5C8.88458 26.133 10.2131 27.4615 11.8461 27.4615C13.4791 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8461 21.5385Z" fill="white"/>
|
||||
<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,10 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_533)">
|
||||
<path d="M25.7949 22.6886C27.5246 20.3265 28.5592 17.4252 28.5592 14.2799C28.5592 6.40637 22.1531 0.000244141 14.2796 0.000244141C6.40606 0.000244141 0 6.40637 0 14.2799C0 22.1534 6.40613 28.5596 14.2797 28.5596C17.4249 28.5596 20.3266 27.5248 22.6886 25.7951L32.0435 35.15L35.15 32.0436C35.15 32.0435 25.7949 22.6886 25.7949 22.6886ZM14.2797 24.1658C8.82824 24.1658 4.39377 19.7313 4.39377 14.2799C4.39377 8.82848 8.82824 4.39401 14.2797 4.39401C19.7311 4.39401 24.1655 8.82848 24.1655 14.2799C24.1655 19.7313 19.731 24.1658 14.2797 24.1658Z" fill="#292929"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_533">
|
||||
<rect width="35.15" height="35.15" rx="5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 821 B |
Loading…
Reference in New Issue
Block a user