forked from M3-Academy/desafio-react-e-typescript
feat(header): Ajustes para mobile, desktop e 2500px+
This commit is contained in:
parent
202f41c045
commit
1c838de87a
@ -2,11 +2,19 @@ header {
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
|
||||
.menu-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-closed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 25px 100px;
|
||||
padding: 22px 100px;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
figure {
|
||||
margin: 0;
|
||||
@ -16,23 +24,47 @@ header {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hamburguer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 26px;
|
||||
width: 136px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
height: 32px;
|
||||
width: 264px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.search-bar-input {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
padding: 12px 16px;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid #f0f0f0;
|
||||
|
||||
background-image: url(./assets/lupa.svg);
|
||||
background-position: center right 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 18px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
|
||||
/* primary-500 */
|
||||
|
||||
color: #c6c6c6;
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,3 +111,166 @@ header {
|
||||
}
|
||||
}
|
||||
}
|
||||
// Telas > 2500
|
||||
@media (min-width: 2500px) {
|
||||
header {
|
||||
.header-top {
|
||||
padding: 25px 100px;
|
||||
|
||||
.logo {
|
||||
height: 50px;
|
||||
width: 265px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 515px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input::-webkit-input-placeholder,
|
||||
textarea::-webkit-input-placeholder {
|
||||
color: #c4c4c4;
|
||||
}
|
||||
|
||||
.search-bar-input {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
padding: 10px 16px;
|
||||
border: 0;
|
||||
|
||||
background-image: url(./assets/lupa.svg);
|
||||
background-position: center right 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 36px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.access {
|
||||
.entrar {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.shopping-cart {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 100px;
|
||||
gap: 55px;
|
||||
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tablet < 720
|
||||
@media screen and (max-width: 1024px) {
|
||||
header {
|
||||
.header-top {
|
||||
padding: 25px 16px;
|
||||
border-bottom: 0px solid #c4c4c4;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 28px 1fr;
|
||||
gap: 25px 0px;
|
||||
grid-template-areas:
|
||||
". . ."
|
||||
"search-bar search-bar search-bar";
|
||||
|
||||
.hamburguer {
|
||||
display: block;
|
||||
height: 23px;
|
||||
width: 28px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.logo {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
grid-area: search-bar;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.access {
|
||||
justify-content: flex-end;
|
||||
|
||||
.entrar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Menu Mobile
|
||||
.overlay {
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.side-menu {
|
||||
width: 90%;
|
||||
|
||||
.side-menu-top {
|
||||
width: 96%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
background-color: black;
|
||||
color: #ffffff;
|
||||
padding: 31px 16px;
|
||||
|
||||
.entrar {
|
||||
margin: 0;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.side-menu-content {
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
padding: 31px 16px;
|
||||
gap: 12px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import "./Header.scss";
|
||||
import logo from "./assets/Logo-M3Academy.svg";
|
||||
import lupa from "./assets/lupa.svg";
|
||||
import shoppingCart from "./assets/shopping-cart.svg";
|
||||
import hamburguer from "./assets/hamburguer.svg";
|
||||
import close from "./assets/close.svg";
|
||||
|
||||
const Header = () => {
|
||||
const [active, setMode] = useState(false);
|
||||
|
||||
const ToggleMenu = () => {
|
||||
setMode(!active);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div className="header-top">
|
||||
{/* Hamburguer */}
|
||||
<figure className="hamburguer" onClick={ToggleMenu}>
|
||||
<img src={hamburguer} alt="Ícone do carrinho de compras" />
|
||||
</figure>
|
||||
{/* Logo M3 Academy */}
|
||||
<figure className="logo">
|
||||
<img src={logo} alt="Logo M3 Academy" />
|
||||
@ -37,6 +49,24 @@ const Header = () => {
|
||||
<p>Saiba Mais</p>
|
||||
<p>Institucionais</p>
|
||||
</div>
|
||||
|
||||
{/* Menu para mobile */}
|
||||
<div className={active ? "menu-open overlay" : "menu-closed"}>
|
||||
<nav className="side-menu">
|
||||
<div className="side-menu-top">
|
||||
<p className="entrar">Entrar</p>
|
||||
<span onClick={ToggleMenu}>
|
||||
<img src={close} alt="" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul className="side-menu-content">
|
||||
<li>Cursos</li>
|
||||
<li>Saiba Mais</li>
|
||||
<li>Institucionais</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
|
||||
4
src/components/Header/assets/close.svg
Normal file
4
src/components/Header/assets/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 |
5
src/components/Header/assets/hamburguer.svg
Normal file
5
src/components/Header/assets/hamburguer.svg
Normal file
@ -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 |
@ -6,6 +6,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user