forked from M3-Academy/desafio-react-e-typescript
feat: adiciona header da pagina
This commit is contained in:
parent
5d6789dc62
commit
e196bc978f
188
Vitor-Soares-main/src/components/Header/index.scss
Normal file
188
Vitor-Soares-main/src/components/Header/index.scss
Normal file
@ -0,0 +1,188 @@
|
||||
@import "../../styles/index.scss";
|
||||
|
||||
// @import "../../styles/mixins.scss";
|
||||
|
||||
@mixin hiden() {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
@mixin visible() {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include large-font-4();
|
||||
@include button-reset();
|
||||
|
||||
.logo {
|
||||
width: max-content !important;
|
||||
height: 50px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
gap: 16px;
|
||||
|
||||
color: $text-cl-1;
|
||||
background: $panel-bg-1;
|
||||
|
||||
.top {
|
||||
padding-block: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
padding-block: 14px;
|
||||
}
|
||||
|
||||
.top,
|
||||
.bottom {
|
||||
padding-inline: $large-padding-inline;
|
||||
}
|
||||
|
||||
.entrar {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.comprar {
|
||||
height: 54.68px;
|
||||
img {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
border-top: solid 1px $border-cl-2;
|
||||
font-weight: 500;
|
||||
color: $text-cl-1;
|
||||
grid-column: 1 / -1;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
gap: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media screen {
|
||||
@media (max-width: 2500px) {
|
||||
@include big-font-4();
|
||||
.logo {
|
||||
height: 26px;
|
||||
}
|
||||
.comprar {
|
||||
height: 28px;
|
||||
}
|
||||
.search-box {
|
||||
width: 264px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
padding-block: 25px;
|
||||
|
||||
.top,
|
||||
.bottom {
|
||||
padding-inline: $big-padding-inline;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
padding-block: 10px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.hamburguer {
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $overlay-bg;
|
||||
z-index: 99;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
max-width: 988px;
|
||||
width: 100%;
|
||||
height: 585px;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
|
||||
transition: all 0.25s 0s;
|
||||
|
||||
nav {
|
||||
color: $text-cl-5;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 31px $big-padding-inline;
|
||||
ul {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
transform: translateX(-100%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
background: $panel-bg-1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 31px $big-padding-inline;
|
||||
|
||||
button {
|
||||
@include center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hide {
|
||||
@include hiden();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
.hamburguer .content {
|
||||
max-width: 339px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
116
Vitor-Soares-main/src/components/Header/index.tsx
Normal file
116
Vitor-Soares-main/src/components/Header/index.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import cart from "../icons/Cart.svg";
|
||||
import closeBtn from "../icons/CloseBtn.svg";
|
||||
import hamburguer from "../icons/Hamburguer.svg";
|
||||
import logo from "../icons/M3Academy.png";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import { SearchBox } from "../SearchBox";
|
||||
import "./index.scss";
|
||||
|
||||
export function Header() {
|
||||
const [move, setMove] = useState<boolean>(false);
|
||||
const [asideOpen, setAsideOpen] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
function calc() {
|
||||
const { innerWidth: width, innerHeight: height } = window;
|
||||
if (width <= 1024) {
|
||||
setMove(true);
|
||||
} else {
|
||||
setMove(false);
|
||||
setAsideOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", calc);
|
||||
calc();
|
||||
}, []);
|
||||
|
||||
if (!move)
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="top">
|
||||
<Link to="/" className="logo">
|
||||
<img src={logo} alt="page logo" />
|
||||
</Link>
|
||||
<SearchBox />
|
||||
|
||||
<div className="icons">
|
||||
<Link to="#" className="entrar">
|
||||
<span>Entrar</span>
|
||||
</Link>
|
||||
|
||||
<Link to="#" className="comprar">
|
||||
<img src={cart} alt="cart icon" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="nav bottom">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={"#"}>CURSOS</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"#"}>SAIBA MAIS</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/institucional"}>INSTITUCIONAIS</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
else
|
||||
return (
|
||||
<header className="header">
|
||||
<div className="top">
|
||||
<div className={`hamburguer ${asideOpen ? "open" : ""}`}>
|
||||
<button onClick={setAsideOpen.bind(null, true)}>
|
||||
<img src={hamburguer} alt="Hamburguer icon" />
|
||||
</button>
|
||||
<div className={`overlay ${!asideOpen ? "hide" : ""}`}></div>
|
||||
<div className={`content ${!asideOpen ? "hide" : ""}`}>
|
||||
<header>
|
||||
<Link to="#" className="entrar">
|
||||
Entrar
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={setAsideOpen.bind(null, false)}
|
||||
className="close"
|
||||
>
|
||||
<img src={closeBtn} alt="close button icon" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<nav className="nav">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to={"#"}>CURSOS</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"#"}>SAIBA MAIS</Link>
|
||||
</li>
|
||||
<li onClick={setAsideOpen.bind(null, false)}>
|
||||
<Link to={"/institucional"}>INSTITUCIONAIS</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<Link to="/" className="logo">
|
||||
<img src={logo} alt="page logo" />
|
||||
</Link>
|
||||
<div className="icons">
|
||||
<Link to="/cart" className="comprar">
|
||||
<img src={cart} alt="cart icon" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bottom">
|
||||
<SearchBox />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user