feat: adiciona menu hamburguer e estilização do 4k
This commit is contained in:
parent
17297b1abd
commit
65e52200fc
@ -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,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,3 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 664 B |
@ -7,6 +7,16 @@
|
||||
height: 76px;
|
||||
padding: 24px 100px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
height: 101px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-logo {
|
||||
button {
|
||||
background: transparent;
|
||||
@ -16,6 +26,12 @@
|
||||
max-width: 136px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,6 +42,11 @@
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 100%;
|
||||
max-width: 515px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
@ -33,8 +54,18 @@
|
||||
border-radius: 5px;
|
||||
padding: 8px 10px 8px 16px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
padding-top: 20px;
|
||||
height: 58px;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #c6c6c6;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,6 +80,13 @@
|
||||
background-repeat: no-repeat;
|
||||
margin: 8px 10px 8px 16px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 11px 16px 11px 16px;
|
||||
background-image: url(../../assets/images/searchicon4k.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -69,6 +107,11 @@
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
margin-right: 55px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.carticon {
|
||||
@ -76,6 +119,12 @@
|
||||
max-width: 28px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 100%;
|
||||
max-width: 54px;
|
||||
height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,6 +136,16 @@
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
height: 61px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-bottom-menu {
|
||||
width: 100%;
|
||||
margin-left: 100px;
|
||||
@ -100,6 +159,12 @@
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
margin-right: 55px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,14 @@ import React from "react";
|
||||
import logo from "../../assets/images/Logo-M3Academy 1.svg";
|
||||
import cart from "../../assets/images/carticon.svg";
|
||||
|
||||
import { MenuHamb } from "../MenuHamburguer/MenuHamb";
|
||||
|
||||
import styles from "./Header.module.scss";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header id="header">
|
||||
<MenuHamb />
|
||||
<div className={styles["container-top"]}>
|
||||
<div className={styles["container-logo"]}>
|
||||
<button>
|
||||
|
||||
@ -0,0 +1,147 @@
|
||||
.container-menu {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background-color: black;
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: black;
|
||||
border: none;
|
||||
padding: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container-menu-top {
|
||||
display: flex;
|
||||
padding: 25px 16px 25px 16px;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
|
||||
.container-menu-top-icons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.academy-logo {
|
||||
width: 100%;
|
||||
max-width: 136px;
|
||||
}
|
||||
.carticon {
|
||||
width: 100%;
|
||||
max-width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0 16px;
|
||||
position: relative;
|
||||
|
||||
.input-busca {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 2px solid #f2f2f2;
|
||||
border-radius: 5px;
|
||||
padding: 8px 10px 8px 16px;
|
||||
|
||||
&::placeholder {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
outline: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
right: 16px;
|
||||
background-color: transparent;
|
||||
background-image: url(../../assets/images/searchicon.svg);
|
||||
background-repeat: no-repeat;
|
||||
margin: 9px 16px 9px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.container-menu-bottom {
|
||||
width: 100%;
|
||||
max-width: 988px;
|
||||
max-height: 0px;
|
||||
margin-top: 18px;
|
||||
transform: translateY(-100%);
|
||||
left: -100%;
|
||||
|
||||
.container-menu-bottom-buttons,
|
||||
.menu-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container-menu-bottomActive {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
max-height: 585px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
transition: left 300ms ease-in;
|
||||
padding-right: 36px;
|
||||
left: 0;
|
||||
|
||||
.container-menu-bottom-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 78px;
|
||||
background-color: black;
|
||||
padding: 31px 16px 31px 16px;
|
||||
}
|
||||
|
||||
.login {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
height: 507px;
|
||||
background-color: white;
|
||||
padding: 31px 16px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.container-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
import React, { useState } from "react";
|
||||
import menuhambicon from "../../assets/images/menuhambicon.svg";
|
||||
import logo from "../../assets/images/Logo-M3Academy 1.svg";
|
||||
import cart from "../../assets/images/carticon.svg";
|
||||
import close from "../../assets/images/closeicon.svg";
|
||||
|
||||
import styles from "./MenuHamb.module.scss";
|
||||
|
||||
const MenuHamb = () => {
|
||||
const [active, setActive] = useState(false);
|
||||
const toggleMode = () => {
|
||||
setActive(!active);
|
||||
};
|
||||
return (
|
||||
<div className={styles["container-menu"]}>
|
||||
<div className={styles["container-menu-top"]}>
|
||||
<div className={styles["container-menu-top-icons"]}>
|
||||
<button
|
||||
className={
|
||||
styles[
|
||||
active
|
||||
? "menu-hamb-icon menu-hamb-iconActive"
|
||||
: "menu-hamb-icon"
|
||||
]
|
||||
}
|
||||
onClick={toggleMode}
|
||||
>
|
||||
<img src={menuhambicon} alt="menu-hamburger-icon" />
|
||||
</button>
|
||||
<img
|
||||
src={logo}
|
||||
alt="Academy-Logo"
|
||||
className={styles["academy-logo"]}
|
||||
/>
|
||||
<button className={styles["cart-icon"]}>
|
||||
<img src={cart} alt="cart-icon" className={styles["carticon"]} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["container-menu-top-input"]}>
|
||||
<div className={styles["container-input"]}>
|
||||
<input
|
||||
type="text"
|
||||
className={styles["input-busca"]}
|
||||
placeholder="Buscar..."
|
||||
/>
|
||||
<button className={styles["search-button"]}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles[active ? "container-overlay" : ""]}
|
||||
onClick={toggleMode}
|
||||
></div>
|
||||
<div
|
||||
className={
|
||||
styles[
|
||||
active ? "container-menu-bottomActive" : "container-menu-bottom"
|
||||
]
|
||||
}
|
||||
>
|
||||
<div className={styles["container-menu-bottom-buttons"]}>
|
||||
<a href="/" className={styles["login"]}>
|
||||
Entrar
|
||||
</a>
|
||||
<button
|
||||
className={
|
||||
styles[active ? "close-icon close-iconActive" : "close-icon"]
|
||||
}
|
||||
onClick={toggleMode}
|
||||
>
|
||||
<img src={close} alt="" className={styles["closeicon"]} />
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles["menu-nav"]}>
|
||||
<a href="/" className={styles["menu-text"]}>
|
||||
Cursos
|
||||
</a>
|
||||
<a href="/" className={styles["menu-text"]}>
|
||||
Saiba Mais
|
||||
</a>
|
||||
<a href="/" className={styles["menu-text"]}>
|
||||
Institucionais
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { MenuHamb };
|
||||
function setActive() {
|
||||
throw new Error("Function not implemented.");
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user