From 6ea1c909de1c49282ee82a5bf79b8976d0144f38 Mon Sep 17 00:00:00 2001 From: Filipe Quintanilha Date: Thu, 5 Jan 2023 12:28:50 -0300 Subject: [PATCH] =?UTF-8?q?feat(BackToTop):=20adiciona=20bot=C3=A3o=20de?= =?UTF-8?q?=20voltar=20ao=20topo=20e=20whatsapp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FooterTop.tsx | 12 ------ src/components/Header.tsx | 3 +- src/components/Main.tsx | 2 + src/components/Modal.tsx | 2 +- src/components/ScrollPage.tsx | 27 +++++++++++++ src/styles/partials/Footer.module.scss | 42 ------------------- src/styles/partials/MainContent.module.scss | 45 +++++++++++++++++++++ 7 files changed, 76 insertions(+), 57 deletions(-) create mode 100644 src/components/ScrollPage.tsx diff --git a/src/components/FooterTop.tsx b/src/components/FooterTop.tsx index c5eb46b..1fb7967 100644 --- a/src/components/FooterTop.tsx +++ b/src/components/FooterTop.tsx @@ -7,8 +7,6 @@ import instagram from "../assets/svgs/instagram.svg"; import twitter from "../assets/svgs/twitter.svg"; import youtube from "../assets/svgs/youtube.svg"; import linkedin from "../assets/svgs/linkedin.svg"; -import whatsapp from "../assets/svgs/whatsapp.svg"; -import seta from "../assets/svgs/up-arrow.svg"; const FoooterTop = () => { return ( @@ -57,16 +55,6 @@ const FoooterTop = () => { www.loremipsum.com -
- whatsapp - - seta - -
); }; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 76dc951..4bfa38a 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -3,12 +3,11 @@ import React from "react"; import styles from "../styles/main.module.scss"; import { HeaderBottom } from "./HeaderBottom"; import { HeaderTop } from "./HeaderTop"; -import { Modal } from "./Modal"; const Header = () => { return (
-
+ diff --git a/src/components/Main.tsx b/src/components/Main.tsx index c34ef2e..3a9c418 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -2,12 +2,14 @@ import React from "react"; import styles from "../styles/main.module.scss"; import { Newsletter } from "./Newsletter"; +import { ScrollPage } from "./ScrollPage"; const Main = () => { return (
+
); diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index c5c1da5..3949e27 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import "./Modal.scss"; import close from "../assets/svgs/close-icon.svg"; diff --git a/src/components/ScrollPage.tsx b/src/components/ScrollPage.tsx new file mode 100644 index 0000000..2c5c71e --- /dev/null +++ b/src/components/ScrollPage.tsx @@ -0,0 +1,27 @@ +import { useState } from "react"; +import styles from "../styles/main.module.scss"; +import whatsapp from "../assets/svgs/whatsapp.svg"; +import seta from "../assets/svgs/up-arrow.svg"; + +const ScrollPage = () => { + const [pageYPosition, setPageYPosition] = useState(0); + + function getPageYAfterScroll() { + setPageYPosition(window.scrollY); + } + + window.addEventListener("scroll", getPageYAfterScroll); + + return ( +
+ whatsapp + {pageYPosition > 600 && ( + + seta + + )} +
+ ); +}; + +export { ScrollPage }; diff --git a/src/styles/partials/Footer.module.scss b/src/styles/partials/Footer.module.scss index 9ab2793..bc3f7d0 100644 --- a/src/styles/partials/Footer.module.scss +++ b/src/styles/partials/Footer.module.scss @@ -67,30 +67,6 @@ color: $black3; } } - - .volta-pag { - position: absolute; - top: 41px; - right: 16px; - display: flex; - flex-direction: column; - gap: 5px; - - &__link { - width: 34px; - height: 34px; - border-radius: 50%; - background: $gray2; - display: flex; - align-items: center; - justify-content: center; - - .go-to-top { - width: 12px; - height: 25px; - } - } - } } &__bottom { @@ -190,12 +166,6 @@ } } - .volta-pag { - bottom: -96px; - z-index: 1; - top: auto; - } - &__bottom { justify-content: flex-start; align-items: flex-start; @@ -205,7 +175,6 @@ &-text { margin-bottom: 15px; - max-width: 354px; } &-central { @@ -265,17 +234,6 @@ width: 66px; top: 26px; } - - .volta-pag { - &__link { - width: 66px; - height: 66px; - - .go-to-top { - width: 24px; - } - } - } } &__bottom { diff --git a/src/styles/partials/MainContent.module.scss b/src/styles/partials/MainContent.module.scss index 7b573c7..38664e0 100644 --- a/src/styles/partials/MainContent.module.scss +++ b/src/styles/partials/MainContent.module.scss @@ -1,4 +1,6 @@ .main-wrapper { + position: relative; + height: 1200px; &__newsletter { display: flex; flex-direction: column; @@ -63,6 +65,35 @@ } } } + + .volta-pag { + position: fixed; + bottom: 20px; + right: 16px; + display: flex; + flex-direction: column; + gap: 5px; + z-index: 1; + + .whatsapp-icon { + width: 34px; + } + + &__link { + width: 34px; + height: 34px; + border-radius: 50%; + background: $gray2; + display: flex; + align-items: center; + justify-content: center; + + .go-to-top { + width: 12px; + height: 25px; + } + } + } } @media screen and (max-width: 1024px) { @@ -134,5 +165,19 @@ } } } + + .volta-pag { + .whatsapp-icon { + width: 66px; + } + &__link { + width: 66px; + height: 66px; + + .go-to-top { + width: 24px; + } + } + } } }