From 4a8fe80f39838cf8958cc7254a721a8964a03d2f Mon Sep 17 00:00:00 2001 From: 0XYoussefX0 Date: Tue, 2 Apr 2024 10:47:47 +0000 Subject: [PATCH 1/4] adjust navbar width when there is no scrollbar --- src/components/Navbar/Navbar.module.scss | 12 +++++++- src/components/Navbar/Navbar.tsx | 36 ++++++++++++++++++++++-- src/styles/theme.scss | 2 ++ 3 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/components/Navbar/Navbar.module.scss b/src/components/Navbar/Navbar.module.scss index 2defd5151d4..d6dc26c472a 100644 --- a/src/components/Navbar/Navbar.module.scss +++ b/src/components/Navbar/Navbar.module.scss @@ -1,6 +1,16 @@ @use "src/styles/constants"; @use "src/styles/breakpoints"; +body[data-scroll-locked] { + .container { + width: calc(100% - var(--scrollbar-width)) !important; + } +} + +.noScrollbarWidth { + width: calc(100% - var(--scrollbar-width)) !important; +} + .emptySpacePlaceholder { height: var(--navbar-container-height); } @@ -10,7 +20,7 @@ position: fixed; height: var(--navbar-height); width: 100%; - transition: var(--transition-regular); + transition: transform var(--transition-regular); background: var(--color-background-elevated); z-index: var(--z-index-header); will-change: transform; diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 1689517a98a..684fa9ce1ea 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import classNames from 'classnames'; import useTranslation from 'next-translate/useTranslation'; @@ -17,13 +17,43 @@ import DonateButtonType from '@/types/DonateButtonType'; const Navbar = () => { const { isActive } = useOnboarding(); const { t } = useTranslation('common'); - const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual); + const { + isVisible: isNavbarVisible, + isSettingsDrawerOpen, + isNavigationDrawerOpen, + isSearchDrawerOpen, + } = useSelector(selectNavbar, shallowEqual); const showNavbar = isNavbarVisible || isActive; + useEffect(() => { + const getScrollbarWidth = () => { + return window.innerWidth - document.documentElement.clientWidth; + }; + + const setScrollbarWidth = () => { + const scrollbarWidth = getScrollbarWidth(); + document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`); + }; + + setScrollbarWidth(); // Set the scrollbar width initially + + window.addEventListener('resize', setScrollbarWidth); // Update the scrollbar width when the window is resized + + return () => { + window.removeEventListener('resize', setScrollbarWidth); + }; + }, []); + return ( <>
-
diff --git a/src/hooks/usePreventBodyScrolling.ts b/src/hooks/usePreventBodyScrolling.ts index 58896513614..7f4543d83f8 100644 --- a/src/hooks/usePreventBodyScrolling.ts +++ b/src/hooks/usePreventBodyScrolling.ts @@ -18,11 +18,16 @@ const usePreventBodyScrolling = (shouldDisableScrolling = false) => { } // Save the initial body style const originalOverflow = document.body.style.overflow; - // disable body scrolling bt setting overflow to hidden on the body + const originalWidth = document.body.style.width; + + // leave space for the scrollbar to avoid causing a layout shift + document.body.style.width = 'calc(100% - var(--scrollbar-width))'; + // disable body scrolling by setting overflow to hidden on the body document.body.style.overflow = 'hidden'; return () => { - // revert it back + // revert them back document.body.style.overflow = originalOverflow; + document.body.style.width = originalWidth; }; }, [shouldDisableScrolling]); }; From 2976aeef8f1fd49ab2885e997ac37d298ea141a6 Mon Sep 17 00:00:00 2001 From: 0XYoussefX0 Date: Tue, 2 Apr 2024 10:48:36 +0000 Subject: [PATCH 3/4] adjust context menu width when there is no scrollbar --- src/components/QuranReader/ContextMenu.module.scss | 11 +++++++++++ src/components/QuranReader/ContextMenu.tsx | 9 ++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/QuranReader/ContextMenu.module.scss b/src/components/QuranReader/ContextMenu.module.scss index 22b4e122ddf..f703a511f3a 100644 --- a/src/components/QuranReader/ContextMenu.module.scss +++ b/src/components/QuranReader/ContextMenu.module.scss @@ -1,6 +1,17 @@ @use "src/styles/constants"; @use "src/styles/breakpoints"; +body[data-scroll-locked] { + .container { + width: calc(100% - var(--scrollbar-width)) !important; + } +} + +.noScrollbarWidth { + width: calc(100% - var(--scrollbar-width)) !important; +} + + .container { background: var(--color-background-default); background: var(--color-background-elevated); diff --git a/src/components/QuranReader/ContextMenu.tsx b/src/components/QuranReader/ContextMenu.tsx index ca661daee78..f023a22c929 100644 --- a/src/components/QuranReader/ContextMenu.tsx +++ b/src/components/QuranReader/ContextMenu.tsx @@ -40,7 +40,12 @@ const ContextMenu = () => { useSelector(selectContextMenu, shallowEqual); const { isActive } = useOnboarding(); - const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual); + const { + isVisible: isNavbarVisible, + isSettingsDrawerOpen, + isNavigationDrawerOpen, + isSearchDrawerOpen, + } = useSelector(selectNavbar, shallowEqual); const showNavbar = isNavbarVisible || isActive; const showReadingPreferenceSwitcher = isReadingPreferenceSwitcherVisible && !isActive; @@ -71,6 +76,8 @@ const ContextMenu = () => { [styles.visibleContainer]: showNavbar, [styles.expandedContainer]: isExpanded, [styles.withVisibleSideBar]: isSideBarVisible, + [styles.noScrollbarWidth]: + isSettingsDrawerOpen || isNavigationDrawerOpen || isSearchDrawerOpen, })} // @ts-ignore // eslint-disable-next-line @typescript-eslint/naming-convention From 48bc1c0496832e3720a42a716a6c4eae8781e0dc Mon Sep 17 00:00:00 2001 From: 0XYoussefX0 Date: Tue, 2 Apr 2024 20:07:27 +0000 Subject: [PATCH 4/4] add margin to onboardingchecklist when there is no scrollbar --- .../OnboardingChecklist.module.scss | 10 +++++++++ .../Onboarding/OnboardingChecklist/index.tsx | 21 +++++++++++++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/components/Onboarding/OnboardingChecklist/OnboardingChecklist.module.scss b/src/components/Onboarding/OnboardingChecklist/OnboardingChecklist.module.scss index 1496750563f..1a814ac52ff 100644 --- a/src/components/Onboarding/OnboardingChecklist/OnboardingChecklist.module.scss +++ b/src/components/Onboarding/OnboardingChecklist/OnboardingChecklist.module.scss @@ -1,5 +1,15 @@ @use "src/styles/breakpoints"; +body[data-scroll-locked] { + .checklistPosition { + margin-right: var(--scrollbar-width); + } +} + +.marginRight { + margin-right: var(--scrollbar-width); +} + .checklistPosition { position: fixed; inset-block-end: var(--spacing-medium); diff --git a/src/components/Onboarding/OnboardingChecklist/index.tsx b/src/components/Onboarding/OnboardingChecklist/index.tsx index 42ffcee89b0..41902df69d6 100644 --- a/src/components/Onboarding/OnboardingChecklist/index.tsx +++ b/src/components/Onboarding/OnboardingChecklist/index.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import { useRouter } from 'next/router'; import Trans from 'next-translate/Trans'; import useTranslation from 'next-translate/useTranslation'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import OnboardingProgress from '../OnboardingProgress'; import { onboardingChecklist } from '../steps'; @@ -16,6 +16,7 @@ import usePersistPreferenceGroup from '@/hooks/auth/usePersistPreferenceGroup'; import CheckIcon from '@/icons/check.svg'; import IconClose from '@/icons/close.svg'; import IconQuestionMark from '@/icons/question-mark-icon.svg'; +import { selectNavbar } from '@/redux/slices/navbar'; import { dismissChecklist, selectOnboarding, @@ -42,6 +43,11 @@ const OnboardingChecklist = () => { const { isChecklistVisible, checklistDismissals, completedGroups } = useSelector(selectOnboarding); + const { isSearchDrawerOpen, isNavigationDrawerOpen, isSettingsDrawerOpen } = useSelector( + selectNavbar, + shallowEqual, + ); + const readingPreferences = useSelector(selectReadingPreferences); const { readingPreference } = readingPreferences; const { @@ -70,7 +76,10 @@ const OnboardingChecklist = () => { return (