forked from M3-Academy/desafio-react-e-typescript
Entrega do Desafio #2
5
src/assets/imgs/IconMenu.svg
Normal file
5
src/assets/imgs/IconMenu.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 |
4
src/assets/imgs/IconMenuClosed.svg
Normal file
4
src/assets/imgs/IconMenuClosed.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/assets/imgs/icon-hamburguer-closed.svg
Normal file
5
src/assets/imgs/icon-hamburguer-closed.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 |
4
src/assets/imgs/icon-hamburguer-open.svg
Normal file
4
src/assets/imgs/icon-hamburguer-open.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 |
@ -1,193 +0,0 @@
|
||||
@import "../../variaveis.scss";
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
//Header Content Top
|
||||
.Header__Top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 84.378%;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
height: 101px;
|
||||
}
|
||||
.Logo {
|
||||
width: 12.589%;
|
||||
height: 25.87px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
width: 11.545%;
|
||||
height: 50.5px;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 25.87px;
|
||||
@media (min-width: 2500px) {
|
||||
height: 50.5px;
|
||||
}
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Menu__Header__Top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 12.589%;
|
||||
padding: 0;
|
||||
@media (min-width: 2500px) {
|
||||
width: 9.331%;
|
||||
}
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
justify-content: end;
|
||||
}
|
||||
& .List {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
&:first-child{
|
||||
margin-right: 55px;
|
||||
}
|
||||
}
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
& .cart__content--link {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Search__Bar {
|
||||
width: 200.04px;
|
||||
height: 12.04px;
|
||||
background: $white;
|
||||
border: 2px solid $primary-700;
|
||||
border-radius: 5px;
|
||||
padding: 8px 44px 8px 16px;
|
||||
background-image: url("../../assets/imgs/magnifying-glass.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 50% right 16px;
|
||||
background-size: 18px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $primary-500;
|
||||
@media (min-width: 2500px) {
|
||||
width: 435.19px;
|
||||
height: 31.18px;
|
||||
padding: 11px 60px 10.85px 16.47px;
|
||||
background-position: bottom 50% right 10.85px;
|
||||
background-size: 35.15px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
&::placeholder {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $primary-500;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Header Content Bottom
|
||||
.Header__Bottom {
|
||||
border-top: 1px solid $primary-600;
|
||||
width: auto;
|
||||
height: 43.01px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
@media (min-width: 2500px) {
|
||||
height: 60.01px;
|
||||
}
|
||||
.Nav__Bar {
|
||||
padding-left: 0;
|
||||
width: 84.378%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
}
|
||||
& ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
& li:not(:nth-child(3n)) {
|
||||
margin-right: 55px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-right: 55.71px;
|
||||
}
|
||||
}
|
||||
& li {
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
386
src/components/Header/Header.scss
Normal file
386
src/components/Header/Header.scss
Normal file
@ -0,0 +1,386 @@
|
||||
@import "../../variaveis.scss";
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
background: $black;
|
||||
@media (min-width: 2500px) {
|
||||
height: 162px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
height: 139px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
height: 139.01px;
|
||||
}
|
||||
& .Checkbox {
|
||||
display: none;
|
||||
}
|
||||
.Checkbox:checked ~ .Header__Bottom {
|
||||
@media (max-width: 1025px) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(0);
|
||||
transition: 0.5s ease-in-out;
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
border-top-width: 0px;
|
||||
}
|
||||
}
|
||||
.Checkbox:checked ~ .Header__Bottom > .Nav__Bar {
|
||||
@media (max-width: 1025px) {
|
||||
width: 96.462%;
|
||||
max-height: 585px;
|
||||
transform: translateX(0);
|
||||
transition: 0.5s ease-in-out;
|
||||
background: $white;
|
||||
position: relative;
|
||||
right: 18px;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
width: 90.22%;
|
||||
}
|
||||
}
|
||||
.Checkbox:checked ~ .Header__Bottom > .Nav__Bar > ul {
|
||||
@media (max-width: 1025px) {
|
||||
position: relative;
|
||||
left: 16px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
}
|
||||
.Checkbox:checked ~ .Header__Top > .Menu__Header__Top > .List__Login {
|
||||
@media (max-width: 1025px) {
|
||||
width: 99.573%;
|
||||
left: -16px;
|
||||
transform: translateX(0);
|
||||
transition: 0.5s ease-in-out;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
width: 98.62%;
|
||||
}
|
||||
}
|
||||
.Checkbox:checked ~ .Label__Menu .Icon__Content {
|
||||
@media (max-width: 1025px) {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Header Content Top
|
||||
.Header__Top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 84.378%;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0px;
|
||||
background: $black;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
height: 101px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
width: 96.875%;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
width: 91.484%;
|
||||
}
|
||||
.Label__Menu {
|
||||
@media (min-width: 1026px) {
|
||||
display: none;
|
||||
}
|
||||
.Icon__Content {
|
||||
@media (max-width: 1025px) {
|
||||
width: 28px;
|
||||
height: 22.5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .Icon__Menu {
|
||||
@media (max-width: 1025px) {
|
||||
width: 28px;
|
||||
height: 22.5px;
|
||||
}
|
||||
}
|
||||
& .Icon__Menu__Closed {
|
||||
@media (max-width: 1025px) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.Logo {
|
||||
width: 12.589%;
|
||||
height: 25.87px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
width: 11.545%;
|
||||
height: 50.5px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
left: 0;
|
||||
position: relative;
|
||||
width: 13.707%;
|
||||
height: 25.87px;
|
||||
}
|
||||
@media (max-width: 1023px) and (min-width: 377px) {
|
||||
width: auto;
|
||||
height: 25.87px;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
width: 39.563%;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@media (max-width: 1025px) {
|
||||
width: 100%;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 25.87px;
|
||||
@media (min-width: 2500px) {
|
||||
height: 50.5px;
|
||||
}
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
width: auto;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Search__Bar {
|
||||
width: calc(100% - 81.483%);
|
||||
height: 12.04px;
|
||||
background: $white;
|
||||
border: 2px solid $primary-700;
|
||||
border-radius: 5px;
|
||||
padding: 8px 44px 8px 16px;
|
||||
background-image: url("../../assets/imgs/magnifying-glass.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 50% right 16px;
|
||||
background-size: 18px;
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $primary-500;
|
||||
@media (min-width: 2500px) {
|
||||
width: 18.9152%;
|
||||
height: 31.18px;
|
||||
padding: 11px 60px 10.85px 16.47px;
|
||||
background-position: bottom 50% right 10.85px;
|
||||
background-size: 35.15px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
width: calc(100% - 64px);
|
||||
height: 16.04px;
|
||||
position: absolute;
|
||||
top: 78px;
|
||||
}
|
||||
@media (max-width: 376px) {
|
||||
width: calc(100% - 64.71px);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $primary-500;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Menu__Header__Top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 12.589%;
|
||||
padding: 0;
|
||||
@media (min-width: 2500px) {
|
||||
width: 9.331%;
|
||||
}
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
justify-content: end;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
justify-content: flex-end;
|
||||
width: auto;
|
||||
}
|
||||
& .List__Login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
@media (max-width: 2500px) and (min-width: 1281px) {
|
||||
&:first-child {
|
||||
margin-right: 55px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
left: -16px;
|
||||
height: 78px;
|
||||
width: 99.573%;
|
||||
transform: translateX(-100%);
|
||||
transition: 0.5s ease-in-out;
|
||||
background: $black;
|
||||
}
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
position: relative;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
.closed {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@media (max-width: 1025px) {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 31px;
|
||||
}
|
||||
}
|
||||
}
|
||||
& .List__Cart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
& .cart__content--link {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Header Content Bottom
|
||||
.Header__Bottom {
|
||||
border-top: 1px solid $primary-600;
|
||||
width: auto;
|
||||
height: 43.01px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
background: $black;
|
||||
@media (min-width: 2500px) {
|
||||
height: 60.01px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(-100%);
|
||||
transition: 0.5s ease-in-out;
|
||||
background: rgba(69, 69, 69, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-top-width: 0px;
|
||||
}
|
||||
.Nav__Bar {
|
||||
padding-left: 0;
|
||||
width: 84.378%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
width: 96.484375%;
|
||||
max-height: 585px;
|
||||
transform: translateX(-100%);
|
||||
transition: 0.5s ease-in-out;
|
||||
align-items: flex-start;
|
||||
left: -18px;
|
||||
position: relative;
|
||||
}
|
||||
& ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0;
|
||||
@media (max-width: 1025px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
position: relative;
|
||||
top: 109px;
|
||||
row-gap: 12px;
|
||||
}
|
||||
& li:not(:nth-child(3n)) {
|
||||
margin-right: 55px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-right: 55.71px;
|
||||
}
|
||||
}
|
||||
& li {
|
||||
list-style: none;
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1025px) {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $primary-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,21 @@
|
||||
import { HeaderContentTop } from "./HeaderContentTop";
|
||||
import styles from "./Header.module.scss";
|
||||
import "./Header.scss";
|
||||
import { HeaderContentBottom } from "./HeaderContentBottom";
|
||||
import Icon__Menu from "../../assets/imgs/IconMenu.svg";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header>
|
||||
<ul className={styles["Header__Top"]}>
|
||||
<input type="checkbox" id="Checkbox" className="Checkbox" />
|
||||
<ul className="Header__Top">
|
||||
<label htmlFor="Checkbox" className="Label__Menu">
|
||||
<span className="Icon__Content">
|
||||
<img src={Icon__Menu} alt="ícone de menu" className="Icon__Menu" />
|
||||
</span>
|
||||
</label>
|
||||
<HeaderContentTop />
|
||||
</ul>
|
||||
<div className={styles["Header__Bottom"]}>
|
||||
<div className="Header__Bottom">
|
||||
<HeaderContentBottom />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import styles from "./Header.module.scss";
|
||||
|
||||
import "./Header.scss"
|
||||
const HeaderContentBottom = () => {
|
||||
return (
|
||||
<>
|
||||
<nav className={styles["Nav__Bar"]}>
|
||||
<nav className="Nav__Bar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">Cursos</a>
|
||||
|
||||
@ -1,35 +1,45 @@
|
||||
import React from "react";
|
||||
import styles from "./Header.module.scss";
|
||||
import "./Header.scss";
|
||||
import Logo from "../../assets/imgs/logom3.svg";
|
||||
import Cart from "../../assets/imgs/cart.svg";
|
||||
import Icon__Menu__Closed from "../../assets/imgs/IconMenuClosed.svg";
|
||||
|
||||
const HeaderContentTop = () => {
|
||||
const [search, setSearch]: [string, (search: string) => void] =
|
||||
React.useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className={styles["Logo"]}>
|
||||
<li className="Logo">
|
||||
<a href="/">
|
||||
<img src={Logo} alt="logo M3" />
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles["List"]}>
|
||||
<input
|
||||
className={styles["Search__Bar"]}
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setSearch(e.target.value)
|
||||
}
|
||||
></input>
|
||||
</li>
|
||||
<ul className={styles["Menu__Header__Top"]}>
|
||||
<li className={styles["List"]}>
|
||||
<input
|
||||
className="Search__Bar"
|
||||
type="text"
|
||||
placeholder="Buscar..."
|
||||
value={search}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setSearch(e.target.value)
|
||||
}
|
||||
></input>
|
||||
<ul className="Menu__Header__Top">
|
||||
<li className="List__Login">
|
||||
<a href="/">Entrar</a>
|
||||
<input type="checkbox" id="Checkbox" className="Checkbox closed" />
|
||||
<label htmlFor="Checkbox" className="Label__Menu">
|
||||
<span className="Icon__Content closed">
|
||||
<img
|
||||
src={Icon__Menu__Closed}
|
||||
alt="ícone do menu pra fechar"
|
||||
className="Icon__Menu__Closed"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<li className={styles["List"]}>
|
||||
<a href="/" className={styles["cart__content--link"]}>
|
||||
<li className="List__Cart">
|
||||
<a href="/" className="cart__content--link">
|
||||
<img src={Cart} alt="ícone de carrinho" />
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user