diff --git a/src/assets/imgs/IconMenu.svg b/src/assets/imgs/IconMenu.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/imgs/IconMenu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/imgs/IconMenuClosed.svg b/src/assets/imgs/IconMenuClosed.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/imgs/IconMenuClosed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/imgs/icon-hamburguer-closed.svg b/src/assets/imgs/icon-hamburguer-closed.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/assets/imgs/icon-hamburguer-closed.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/imgs/icon-hamburguer-open.svg b/src/assets/imgs/icon-hamburguer-open.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/assets/imgs/icon-hamburguer-open.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss deleted file mode 100644 index 8c361c9..0000000 --- a/src/components/Header/Header.module.scss +++ /dev/null @@ -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; - } - } - } - } - } -} diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss new file mode 100644 index 0000000..fca08f4 --- /dev/null +++ b/src/components/Header/Header.scss @@ -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; + } + } + } + } + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 54bcba7..c477274 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -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 (
-
diff --git a/src/components/Header/HeaderContentBottom.tsx b/src/components/Header/HeaderContentBottom.tsx index 167300e..bdd1967 100644 --- a/src/components/Header/HeaderContentBottom.tsx +++ b/src/components/Header/HeaderContentBottom.tsx @@ -1,9 +1,8 @@ -import styles from "./Header.module.scss"; - +import "./Header.scss" const HeaderContentBottom = () => { return ( <> -