From 161a43f6cc17d8f8ceffc2886be32c6356909ff9 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 7 Jan 2023 20:26:58 -0300 Subject: [PATCH 1/5] feat(header): Cria o header top para desktop --- .../HeaderTop/HeaderTop.module.scss | 185 ++++++++++++++++++ src/components/HeaderTop/HeaderTop.tsx | 56 ++++++ src/components/HeaderTop/assets/cart.svg | 12 ++ .../assets/hamburger-menu-btn-icon.svg | 5 + .../HeaderTop/assets/logo-m3academy.png | Bin 0 -> 2931 bytes src/components/HeaderTop/assets/search.svg | 10 + src/pages/Home.module.scss | 14 ++ src/pages/Home.tsx | 10 +- 8 files changed, 291 insertions(+), 1 deletion(-) create mode 100644 src/components/HeaderTop/HeaderTop.module.scss create mode 100644 src/components/HeaderTop/HeaderTop.tsx create mode 100644 src/components/HeaderTop/assets/cart.svg create mode 100644 src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg create mode 100644 src/components/HeaderTop/assets/logo-m3academy.png create mode 100644 src/components/HeaderTop/assets/search.svg create mode 100644 src/pages/Home.module.scss diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss new file mode 100644 index 0000000..776ddb1 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.module.scss @@ -0,0 +1,185 @@ +@use '../../variables'; + +.header-top { + border-bottom: 1px solid variables.$gray-400; + + @media (max-width: 1024px) { + border-bottom: none; + } + + &__wrapper { + display: grid; + grid-template-columns: 1fr minmax(264px, 24.4445%) 1fr; + padding: 22px 100px; + height: 76px; + + @media (min-width: 3600px) { + grid-template-columns: 1fr 700px 1fr; + height: 111px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + grid-template-columns: 1fr 515px 1fr; + height: 101px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)) { + grid-template-columns: 1fr 415px 1fr; + } + } + + &__logo { + display: flex; + align-items: center; + justify-content: left; + + @media (max-width: 1024px) { + justify-content: center; + grid-area: 1/2; + } + + &__img { + width: 100%; + max-width: 136px; + + @media (min-width: 3600px) { + min-width: 290px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + min-width: 265px; + } + } + } + + &__search-bar { + display: flex; + justify-content: center; + align-items: center; + position: relative; + + &__input { + margin: 0 auto; + width: 100%; + min-width: 264px; + height: 32px; + background-color: variables.$white; + border: 2px solid variables.$gray-500; + border-radius: 5px; + padding: 12px 16px; + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + max-width: 700px; + height: 62px; + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + max-width: 515px; + height: 57px; + font-size: 28px; + line-height: 33px; + } + + @media ((min-width: 1900px) and (max-width: 2499px)){ + max-width: 415px; + } + + &::placeholder { + font-size: 14px; + line-height: 16px; + color: variables.$gray-300; + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } + + &__btn { + border: none; + background: transparent; + position: absolute; + top: 7px; + right: 16px; + + @media (min-width: 3600px) { + top: 16px; + bottom: 11px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)){ + top: 11px; + bottom: 11px; + } + + &__img { + + @media (min-width: 2500px) { + width: 100%; + min-width: 35px; + } + } + } + } + + &__menu { + display: flex; + align-items: center; + justify-content: right; + gap: 55px; + + &__login { + color: variables.$white; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + &:hover { + filter: brightness(80%); + } + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + } + + &__btn-cart { + background: transparent; + border: none; + + &:hover { + filter: brightness(80%); + } + + &__img { + width: 100%; + max-width: 28px; + + @media (min-width: 2500px) { + min-width: 54px; + } + } + } + } +} diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx new file mode 100644 index 0000000..bc75130 --- /dev/null +++ b/src/components/HeaderTop/HeaderTop.tsx @@ -0,0 +1,56 @@ +import {useState} from 'react'; + +import styles from "./HeaderTop.module.scss"; + +import imgLogo from "./assets/logo-m3academy.png"; +import imgCart from "./assets/cart.svg"; +import imgSearch from "./assets/search.svg"; + +const HeaderTop = () => { + + const [search, setSearch] = useState(""); + + const handleSearch = ({target}:any) =>{ + setSearch(target.value); + } + + const cleanSearch = () => setSearch(''); + + return ( +
+
+ + + + Logo M3 Academy + + + +
+ + + +
+ +
+ + Entrar + + + +
+
+
+ ); +} + +export {HeaderTop}; diff --git a/src/components/HeaderTop/assets/cart.svg b/src/components/HeaderTop/assets/cart.svg new file mode 100644 index 0000000..78ac70f --- /dev/null +++ b/src/components/HeaderTop/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg new file mode 100644 index 0000000..6cadeb3 --- /dev/null +++ b/src/components/HeaderTop/assets/hamburger-menu-btn-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/HeaderTop/assets/logo-m3academy.png b/src/components/HeaderTop/assets/logo-m3academy.png new file mode 100644 index 0000000000000000000000000000000000000000..7f6b6ad2d94ac1c00a5ac6efa55d84bbf5f8144f GIT binary patch literal 2931 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 + + + + + + + + + diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss new file mode 100644 index 0000000..6fc04aa --- /dev/null +++ b/src/pages/Home.module.scss @@ -0,0 +1,14 @@ +@use '../variables'; + +.header { + background-color: variables.$black; + height: 120px; + + @media (min-width: 3600px) { + height: 182px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + height: 162px; + } +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index cd6761d..18e007d 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,11 +1,19 @@ import React from 'react'; +import styles from "./Home.module.scss"; + +import { HeaderTop } from '../components/HeaderTop/HeaderTop'; + const Home = () => { return ( <> -
+
+ +
+
+
); From 0598c83fc09414d6ad4070ef1dbe779e4079c8b7 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 7 Jan 2023 20:53:42 -0300 Subject: [PATCH 2/5] =?UTF-8?q?feat(header):=20Estiza=20o=20header=20para?= =?UTF-8?q?=20mobiles=20e=20adiciona=20o=20bot=C3=A3o=20do=20menu=20hambur?= =?UTF-8?q?guer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HeaderTop/HeaderTop.module.scss | 52 ++++++++++++++++++- src/components/HeaderTop/HeaderTop.tsx | 5 ++ src/pages/Home.module.scss | 4 ++ 3 files changed, 60 insertions(+), 1 deletion(-) diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss index 776ddb1..fb245db 100644 --- a/src/components/HeaderTop/HeaderTop.module.scss +++ b/src/components/HeaderTop/HeaderTop.module.scss @@ -26,6 +26,33 @@ @media ((min-width: 1900px) and (max-width: 2499px)) { grid-template-columns: 1fr 415px 1fr; } + + @media (max-width: 1024px) { + grid-template-columns: 10% 80% 10%; + padding: 25px 16px; + height: 139px; + } + } + + &__btn-hamburger { + display: none; + + @media (max-width: 1024px) { + display: flex; + align-items: center; + background: transparent; + border: none; + grid-area: 1/1; + + &__img { + width: 100%; + max-width: 28px; + } + + &:hover { + filter: brightness(80%); + } + } } &__logo { @@ -58,6 +85,10 @@ align-items: center; position: relative; + @media (max-width: 1024px) { + grid-area: 2 / 1 / 2 / 4; + } + &__input { margin: 0 auto; width: 100%; @@ -89,6 +120,12 @@ max-width: 415px; } + @media (max-width: 1024px) { + min-width: 100%; + margin-top: 25px; + height: 36px; + } + &::placeholder { font-size: 14px; line-height: 16px; @@ -126,6 +163,10 @@ top: 11px; bottom: 11px; } + + @media (max-width: 1024px) { + top: 34px; + } &__img { @@ -143,6 +184,11 @@ justify-content: right; gap: 55px; + @media (max-width: 1024px) { + grid-area: 1/3; + gap: 0; + } + &__login { color: variables.$white; font-size: 14px; @@ -162,6 +208,10 @@ font-size: 28px; line-height: 33px; } + + @media (max-width: 1024px) { + display: none; + } } &__btn-cart { @@ -182,4 +232,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx index bc75130..7b37e67 100644 --- a/src/components/HeaderTop/HeaderTop.tsx +++ b/src/components/HeaderTop/HeaderTop.tsx @@ -5,6 +5,7 @@ import styles from "./HeaderTop.module.scss"; import imgLogo from "./assets/logo-m3academy.png"; import imgCart from "./assets/cart.svg"; import imgSearch from "./assets/search.svg"; +import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg"; const HeaderTop = () => { @@ -20,6 +21,10 @@ const HeaderTop = () => {
+ + Logo M3 Academy diff --git a/src/pages/Home.module.scss b/src/pages/Home.module.scss index 6fc04aa..0e249ac 100644 --- a/src/pages/Home.module.scss +++ b/src/pages/Home.module.scss @@ -11,4 +11,8 @@ @media ((min-width: 2500px) and (max-width: 3599px)) { height: 162px; } + + @media (max-width: 1024px) { + height: 139px; + } } \ No newline at end of file From 53d8bc6971ac84cf5d081ad97f995be09fb5f89a Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 7 Jan 2023 22:26:50 -0300 Subject: [PATCH 3/5] =?UTF-8?q?feat(header):=20Cria=20a=20barra=20de=20nav?= =?UTF-8?q?ega=C3=A7=C3=A3o=20do=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HeaderNavBar/HeaderNavBar.module.scss | 43 +++++++++++++++++++ src/components/HeaderNavBar/HeaderNavBar.tsx | 20 +++++++++ .../ItemNavBar/ItemNavBar.module.scss | 29 +++++++++++++ src/components/ItemNavBar/ItemNavBar.tsx | 10 +++++ 4 files changed, 102 insertions(+) create mode 100644 src/components/HeaderNavBar/HeaderNavBar.module.scss create mode 100644 src/components/HeaderNavBar/HeaderNavBar.tsx create mode 100644 src/components/ItemNavBar/ItemNavBar.module.scss create mode 100644 src/components/ItemNavBar/ItemNavBar.tsx diff --git a/src/components/HeaderNavBar/HeaderNavBar.module.scss b/src/components/HeaderNavBar/HeaderNavBar.module.scss new file mode 100644 index 0000000..6361cc0 --- /dev/null +++ b/src/components/HeaderNavBar/HeaderNavBar.module.scss @@ -0,0 +1,43 @@ +@use '../../variables'; + +.header-nav-bar { + height: 44px; + + @media (min-width: 3600px) { + height: 70px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)){ + height: 61px; + } + + @media (max-width: 1024px) { + height: 0; + } + + &__ul { + display: flex; + align-items: center; + text-transform: none; + padding: 14px 100px; + height: 44px; + gap: 55px; + + @media (min-width: 3600px) { + height: 70px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)){ + height: 61px; + } + + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + background-color: variables.$white; + height: 507px; + padding: 31px 16px; + gap: 0; + } + } +} diff --git a/src/components/HeaderNavBar/HeaderNavBar.tsx b/src/components/HeaderNavBar/HeaderNavBar.tsx new file mode 100644 index 0000000..54811a7 --- /dev/null +++ b/src/components/HeaderNavBar/HeaderNavBar.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import styles from "./HeaderNavBar.module.scss"; + +import { ItemNavBar } from '../ItemNavBar/ItemNavBar'; + +const HeaderNavBar = () => { + + return ( + + ); +} + +export {HeaderNavBar}; diff --git a/src/components/ItemNavBar/ItemNavBar.module.scss b/src/components/ItemNavBar/ItemNavBar.module.scss new file mode 100644 index 0000000..1f5b977 --- /dev/null +++ b/src/components/ItemNavBar/ItemNavBar.module.scss @@ -0,0 +1,29 @@ +@use '../../variables'; + +.nav-bar__item { + font-weight: 500; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: variables.$white; + cursor: pointer; + + @media (min-width: 3600px) { + font-size: 32px; + line-height: 38px; + } + + @media ((min-width: 2500px) and (max-width: 3599px)) { + font-size: 28px; + line-height: 33px; + } + + @media (max-width: 1024px) { + color: variables.$gray-400; + margin-bottom: 12px; + } + + &:hover { + filter: brightness(80%); + } +} diff --git a/src/components/ItemNavBar/ItemNavBar.tsx b/src/components/ItemNavBar/ItemNavBar.tsx new file mode 100644 index 0000000..7d37cf7 --- /dev/null +++ b/src/components/ItemNavBar/ItemNavBar.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import styles from "./ItemNavBar.module.scss"; + +const ItemNavBar = ( props:any) => { + const { text } = props; + return
  • { text }
    • ; +}; + +export { ItemNavBar }; From c8787ccafbc6fd0224d6979e6bb019fc021092ba Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 7 Jan 2023 22:31:49 -0300 Subject: [PATCH 4/5] feat(header): Cria o header bottom desktop --- .../HeaderBottom/HeaderBottom.module.scss | 7 +++++++ src/components/HeaderBottom/HeaderBottom.tsx | 16 ++++++++++++++++ src/pages/Home.tsx | 2 ++ 3 files changed, 25 insertions(+) create mode 100644 src/components/HeaderBottom/HeaderBottom.module.scss create mode 100644 src/components/HeaderBottom/HeaderBottom.tsx diff --git a/src/components/HeaderBottom/HeaderBottom.module.scss b/src/components/HeaderBottom/HeaderBottom.module.scss new file mode 100644 index 0000000..b6bb0e5 --- /dev/null +++ b/src/components/HeaderBottom/HeaderBottom.module.scss @@ -0,0 +1,7 @@ +@use '../../variables'; + +.header-bottom { + @media (max-width: 1024px) { + display: none; + } +} diff --git a/src/components/HeaderBottom/HeaderBottom.tsx b/src/components/HeaderBottom/HeaderBottom.tsx new file mode 100644 index 0000000..7984c44 --- /dev/null +++ b/src/components/HeaderBottom/HeaderBottom.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import styles from "./HeaderBottom.module.scss"; + +import { HeaderNavBar } from '../HeaderNavBar/HeaderNavBar'; + +const HeaderBottom = () => { + + return ( +
    + +
    + ); +} + +export {HeaderBottom}; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 18e007d..4ef54c4 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -3,6 +3,7 @@ import React from 'react'; import styles from "./Home.module.scss"; import { HeaderTop } from '../components/HeaderTop/HeaderTop'; +import { HeaderBottom } from '../components/HeaderBottom/HeaderBottom'; const Home = () => { @@ -10,6 +11,7 @@ const Home = () => { <>
    +
    From 8aa3eef9655b89a2fb46c5e27293142b488a4adf Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 8 Jan 2023 13:38:46 -0300 Subject: [PATCH 5/5] =?UTF-8?q?feat(header):=20Adiciona=20o=20menu=20ocult?= =?UTF-8?q?o=20para=20mobile=20e=20o=20overlay=20quando=20o=20menu=20ocult?= =?UTF-8?q?o=20=C3=A9=20aberto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HeaderTop/HeaderTop.module.scss | 91 ++++++++++++++++++- src/components/HeaderTop/HeaderTop.tsx | 58 ++++++++++-- .../HeaderTop/assets/close-menu-btn-icon.svg | 4 + 3 files changed, 146 insertions(+), 7 deletions(-) create mode 100644 src/components/HeaderTop/assets/close-menu-btn-icon.svg diff --git a/src/components/HeaderTop/HeaderTop.module.scss b/src/components/HeaderTop/HeaderTop.module.scss index fb245db..6489ff8 100644 --- a/src/components/HeaderTop/HeaderTop.module.scss +++ b/src/components/HeaderTop/HeaderTop.module.scss @@ -54,6 +54,75 @@ } } } + + &__menu-mobile { + &__active, + &__desactive { + width: 96.484375%; + height: 585px; + position: absolute; + top: 0; + left: 0; + z-index: map-get(variables.$z-index, level2); + + @media (min-width: 1025px) { + display: none; + } + + @media (max-width: 375px) { + width: 90.4%; + } + } + + &__active { + opacity: 1; + visibility: visible; + transition: all 0.5s ease; + transform: translateX(0%); + } + + &__desactive { + opacity: 0; + visibility: hidden; + transition: all 0.5s ease; + transform: translateX(-100%); + } + + &__items { + display: flex; + justify-content: space-between; + height: 78px; + padding: 31px 16px; + background-color: variables.$black; + } + + &__login{ + display: flex; + align-items: center; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + color: variables.$white; + + &:hover { + filter: brightness(80%); + } + } + + &__close-btn { + background: transparent; + border: none; + + &__img { + width: 100%; + max-width: 15px; + } + + &:hover { + filter: brightness(80%); + } + } + } &__logo { display: flex; @@ -232,4 +301,24 @@ } } } -} \ No newline at end of file + + &__overlay { + display: block; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: variables.$shadow2; + z-index: map-get(variables.$z-index, level1); + transition: all 0.5s ease-in-out; + + @media (min-width: 1025px) { + display: none; + } + } + + &__overlay-close { + display: none; + } +} diff --git a/src/components/HeaderTop/HeaderTop.tsx b/src/components/HeaderTop/HeaderTop.tsx index 7b37e67..5425f0d 100644 --- a/src/components/HeaderTop/HeaderTop.tsx +++ b/src/components/HeaderTop/HeaderTop.tsx @@ -1,4 +1,4 @@ -import {useState} from 'react'; +import { useState, useEffect, useRef } from 'react'; import styles from "./HeaderTop.module.scss"; @@ -6,25 +6,64 @@ import imgLogo from "./assets/logo-m3academy.png"; import imgCart from "./assets/cart.svg"; import imgSearch from "./assets/search.svg"; import imgHamburgerBtn from "./assets/hamburger-menu-btn-icon.svg"; +import imgCloseBtn from "./assets/close-menu-btn-icon.svg"; + +import { HeaderNavBar } from '../HeaderNavBar/HeaderNavBar'; const HeaderTop = () => { + const [open, setOpen] = useState(false); + + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + let menuRef:any= useRef(); + + useEffect(() => { + let handler = (e:any) => { + if (!menuRef.current.contains(e.target)) { + setOpen(false) + } + }; + + document.addEventListener("mousedown", handler); + }); + + //-------------------------------------------------------- + const [search, setSearch] = useState(""); - const handleSearch = ({target}:any) =>{ + const handleSearch = (target:any) => { setSearch(target.value); } - - const cleanSearch = () => setSearch(''); + const cleanSearch = () => setSearch(''); + return (     + +
    +
    +
    ); } diff --git a/src/components/HeaderTop/assets/close-menu-btn-icon.svg b/src/components/HeaderTop/assets/close-menu-btn-icon.svg new file mode 100644 index 0000000..e0e6d36 --- /dev/null +++ b/src/components/HeaderTop/assets/close-menu-btn-icon.svg @@ -0,0 +1,4 @@ + + + +