Fixing the layout shift that happens in the home page and chapterId page

next.config.js

@@ -164,7 +164,7 @@ const config = {
     ];
   },
 };
-
+/* eslint-disable max-lines */
 module.exports = withPlugins(
   [withBundleAnalyzer, withPWA, withFonts, nextTranslate, withSentryConfig],
   config,

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;

src/components/Navbar/Navbar.tsx

@@ -7,17 +7,31 @@ import styles from './Navbar.module.scss';
 import NavbarBody from './NavbarBody';
 
 import { useOnboarding } from '@/components/Onboarding/OnboardingProvider';
+import useScrollBarWidth from '@/hooks/useScrollBarWidth';
 import { selectNavbar } from '@/redux/slices/navbar';
 
 const Navbar = () => {
   const { isActive } = useOnboarding();
-  const { isVisible: isNavbarVisible } = useSelector(selectNavbar, shallowEqual);
+  const {
+    isVisible: isNavbarVisible,
+    isSettingsDrawerOpen,
+    isNavigationDrawerOpen,
+    isSearchDrawerOpen,
+  } = useSelector(selectNavbar, shallowEqual);
   const showNavbar = isNavbarVisible || isActive;
 
+  useScrollBarWidth();
+
   return (
     <>
       <div className={styles.emptySpacePlaceholder} />
-      <nav className={classNames(styles.container, { [styles.hiddenNav]: !showNavbar })}>
+      <nav
+        className={classNames(styles.container, {
+          [styles.hiddenNav]: !showNavbar,
+          [styles.noScrollbarWidth]:
+            isSettingsDrawerOpen || isNavigationDrawerOpen || isSearchDrawerOpen,
+        })}
+      >
         <NavbarBody />
       </nav>
     </>

src/components/Navbar/NavbarBody/index.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
 import useTranslation from 'next-translate/useTranslation';
+import { createPortal } from 'react-dom';
 import { useDispatch } from 'react-redux';
 
 import LanguageSelector from '../LanguageSelector';
@@ -51,6 +52,8 @@ const NavbarBody: React.FC = () => {
     dispatch({ type: setIsSettingsDrawerOpen.type, payload: true });
   };
 
+  const isClient = typeof document !== 'undefined';
+
   return (
     <div className={styles.itemsContainer}>
       <div className={styles.centerVertically}>
@@ -85,7 +88,7 @@ const NavbarBody: React.FC = () => {
             >
               <IconSettings />
             </Button>
-            <SettingsDrawer />
+            {isClient && createPortal(<SettingsDrawer />, document.body)}
           </>
           <>
             <Button
@@ -98,7 +101,7 @@ const NavbarBody: React.FC = () => {
             >
               <IconSearch />
             </Button>
-            <SearchDrawer />
+            {isClient && createPortal(<SearchDrawer />, document.body)}
           </>
         </div>
       </div>

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);

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 (
         <Button
           shape={ButtonShape.Circle}
-          className={classNames(styles.checklistPosition)}
+          className={classNames(styles.checklistPosition, {
+            [styles.marginRight]:
+              isSearchDrawerOpen || isNavigationDrawerOpen || isSettingsDrawerOpen,
+          })}
           tooltip={t('onboarding:onboarding-checklist')}
           onClick={openChecklist}
           size={ButtonSize.Large}
@@ -112,7 +121,11 @@ const OnboardingChecklist = () => {
   };
 
   return (
-    <div className={classNames(styles.checklist, styles.checklistPosition)}>
+    <div
+      className={classNames(styles.checklist, styles.checklistPosition, {
+        [styles.marginRight]: isSearchDrawerOpen || isNavigationDrawerOpen || isSettingsDrawerOpen,
+      })}
+    >
       <div className={styles.checklistHeader}>
         <h4>
           <Trans
@@ -161,5 +174,5 @@ const OnboardingChecklist = () => {
     </div>
   );
 };
-
+// eslint-disable-next-line max-lines
 export default OnboardingChecklist;

src/components/QuranReader/ContextMenu.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;
+}
+
 .container {
   background: var(--color-background-default);
   background: var(--color-background-elevated);

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

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]);
 };

src/hooks/useScrollBarWidth.ts

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+const useScrollBarWidth = () => {
+  useEffect(() => {
+    const getScrollbarWidth = () => {
+      return window.innerWidth - document.documentElement.clientWidth;
+    };
+
+    const setScrollbarWidth = () => {
+      const scrollbarWidth = getScrollbarWidth();
+      document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+    };
+
+    function throttle(fn: () => void, time: number) {
+      let timeout = null;
+      return () => {
+        if (timeout) return;
+        timeout = setTimeout(() => {
+          fn();
+          timeout = null;
+        }, time);
+      };
+    }
+
+    const handleResizeThrottled = throttle(setScrollbarWidth, 500); // Throttle the resize event
+
+    setScrollbarWidth(); // Set the scrollbar width initially
+
+    window.addEventListener('resize', handleResizeThrottled); // Update the scrollbar width when the window is resized
+
+    return () => {
+      window.removeEventListener('resize', handleResizeThrottled);
+    };
+  }, []);
+};
+
+export default useScrollBarWidth;

src/styles/theme.scss

@@ -63,6 +63,8 @@
   --transition-regular: 0.4s;
   --transition-slow: 0.6s;
 
+  --scrollbar-width: 0px;
+
   @include shades.shades-dangerous;
   @include light.mode;