From 7343d264cecc8dab1b6102442cabe2864b26defd Mon Sep 17 00:00:00 2001 From: adipol1359 Date: Wed, 7 Dec 2022 12:22:20 +0100 Subject: [PATCH 1/3] feat(app): add usePageScroll hook --- .../src/components/Header/HeaderNavigation.tsx | 3 +++ apps/app/src/hooks/usePageScroll.tsx | 17 +++++++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 apps/app/src/hooks/usePageScroll.tsx diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx index 4f7eb6a6..7742ab0a 100644 --- a/apps/app/src/components/Header/HeaderNavigation.tsx +++ b/apps/app/src/components/Header/HeaderNavigation.tsx @@ -3,14 +3,17 @@ import { useState } from "react"; import { twMerge } from "tailwind-merge"; import type { ReactNode, MouseEvent } from "react"; +import { usePageScroll } from "../../hooks/usePageScroll"; const itemStyles = "ease h-0.5 w-6 bg-white transition duration-300"; export const HeaderNavigation = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useState(false); + const { lockScroll, unlockScroll } = usePageScroll(); const handleButtonClick = (event: MouseEvent) => { event.preventDefault(); + isOpen ? unlockScroll() : lockScroll(); setIsOpen((prev) => !prev); }; diff --git a/apps/app/src/hooks/usePageScroll.tsx b/apps/app/src/hooks/usePageScroll.tsx new file mode 100644 index 00000000..a35f7a5b --- /dev/null +++ b/apps/app/src/hooks/usePageScroll.tsx @@ -0,0 +1,17 @@ +import { useCallback } from "react"; + +const classes = ["overflow-hidden", "sm:overflow-scroll"]; + +export const usePageScroll = () => { + const lockScroll = useCallback(() => { + document.body.style.paddingRight = `${window.innerWidth - document.body.offsetWidth}px`; + document.body.classList.add(...classes); + }, []); + + const unlockScroll = useCallback(() => { + document.body.style.paddingRight = ""; + document.body.classList.remove(...classes); + }, []); + + return { lockScroll, unlockScroll }; +}; From aa6066855a2fddea0977b5a8590b261d19b2583c Mon Sep 17 00:00:00 2001 From: adipol1359 Date: Wed, 7 Dec 2022 12:30:59 +0100 Subject: [PATCH 2/3] refactor(app): change hook to util --- .../src/components/Header/HeaderNavigation.tsx | 3 +-- apps/app/src/hooks/usePageScroll.tsx | 17 ----------------- apps/app/src/utils/pageScroll.ts | 11 +++++++++++ 3 files changed, 12 insertions(+), 19 deletions(-) delete mode 100644 apps/app/src/hooks/usePageScroll.tsx create mode 100644 apps/app/src/utils/pageScroll.ts diff --git a/apps/app/src/components/Header/HeaderNavigation.tsx b/apps/app/src/components/Header/HeaderNavigation.tsx index 7742ab0a..17932538 100644 --- a/apps/app/src/components/Header/HeaderNavigation.tsx +++ b/apps/app/src/components/Header/HeaderNavigation.tsx @@ -3,13 +3,12 @@ import { useState } from "react"; import { twMerge } from "tailwind-merge"; import type { ReactNode, MouseEvent } from "react"; -import { usePageScroll } from "../../hooks/usePageScroll"; +import { lockScroll, unlockScroll } from "../../utils/pageScroll"; const itemStyles = "ease h-0.5 w-6 bg-white transition duration-300"; export const HeaderNavigation = ({ children }: { children: ReactNode }) => { const [isOpen, setIsOpen] = useState(false); - const { lockScroll, unlockScroll } = usePageScroll(); const handleButtonClick = (event: MouseEvent) => { event.preventDefault(); diff --git a/apps/app/src/hooks/usePageScroll.tsx b/apps/app/src/hooks/usePageScroll.tsx deleted file mode 100644 index a35f7a5b..00000000 --- a/apps/app/src/hooks/usePageScroll.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useCallback } from "react"; - -const classes = ["overflow-hidden", "sm:overflow-scroll"]; - -export const usePageScroll = () => { - const lockScroll = useCallback(() => { - document.body.style.paddingRight = `${window.innerWidth - document.body.offsetWidth}px`; - document.body.classList.add(...classes); - }, []); - - const unlockScroll = useCallback(() => { - document.body.style.paddingRight = ""; - document.body.classList.remove(...classes); - }, []); - - return { lockScroll, unlockScroll }; -}; diff --git a/apps/app/src/utils/pageScroll.ts b/apps/app/src/utils/pageScroll.ts new file mode 100644 index 00000000..52af9914 --- /dev/null +++ b/apps/app/src/utils/pageScroll.ts @@ -0,0 +1,11 @@ +const classes = ["overflow-hidden", "sm:overflow-scroll"]; + +export const lockScroll = () => { + document.body.style.paddingRight = `${window.innerWidth - document.body.offsetWidth}px`; + document.body.classList.add(...classes); +}; + +export const unlockScroll = () => { + document.body.style.paddingRight = ""; + document.body.classList.remove(...classes); +}; From 8bd036eb30097534d729c22e1c4af8a856ffc237 Mon Sep 17 00:00:00 2001 From: adipol1359 Date: Wed, 7 Dec 2022 12:59:01 +0100 Subject: [PATCH 3/3] feat(app): add client-only to page util --- apps/app/package.json | 1 + apps/app/src/utils/pageScroll.ts | 2 ++ pnpm-lock.yaml | 2 ++ 3 files changed, 5 insertions(+) diff --git a/apps/app/package.json b/apps/app/package.json index b4e4e0da..78e413dd 100644 --- a/apps/app/package.json +++ b/apps/app/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@next/font": "13.0.6", + "client-only": "0.0.1", "next": "13.0.4", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/apps/app/src/utils/pageScroll.ts b/apps/app/src/utils/pageScroll.ts index 52af9914..3111c76f 100644 --- a/apps/app/src/utils/pageScroll.ts +++ b/apps/app/src/utils/pageScroll.ts @@ -1,3 +1,5 @@ +import "client-only"; + const classes = ["overflow-hidden", "sm:overflow-scroll"]; export const lockScroll = () => { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d79a43a..b1a5ce89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -94,6 +94,7 @@ importers: '@types/react': 18.0.26 '@vercel/analytics': 0.1.5 autoprefixer: ^10.4.13 + client-only: 0.0.1 css-loader: ^6.7.2 eslint: 8.29.0 eslint-config-devfaq: workspace:* @@ -111,6 +112,7 @@ importers: typescript: 4.9.3 dependencies: '@next/font': 13.0.6 + client-only: 0.0.1 next: 13.0.4_672uxklweod7ene3nqtsh262ca react: 18.2.0 react-dom: 18.2.0_react@18.2.0