update lightbox implementation

src/components/interactive/Lightbox.js

@@ -15,7 +15,7 @@ import { Focusable } from '~components/interactive/Focusable';
 import { Icon } from '~components/multimedia/Icon';
 import Img from '~components/multimedia/Img';
 
-import { useEventListener, animation } from '~utils';
+import { useEventListener, useScrollLock, animation } from '~utils';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // helpers
@@ -49,6 +49,8 @@ export default function Lightbox({
 
   const closeButtonRef = React.useRef();
 
+  const { enableScrollLock, disableScrollLock } = useScrollLock();
+
   const handlePrevious = () => setCurrentIdx((prev) => (prev + images.length - 1) % images.length);
   const handleNext = () => setCurrentIdx((prev) => (prev + 1) % images.length);
 
@@ -68,7 +70,13 @@ export default function Lightbox({
   });
 
   React.useEffect(() => {
-    if (isOpen) closeButtonRef.current.focus();
+    if (isOpen) {
+      closeButtonRef.current.focus();
+      enableScrollLock();
+      return undefined;
+    }
+    disableScrollLock();
+    return undefined;
   }, [isOpen]);
 
   if (!isOpen) return null;
@@ -194,7 +202,7 @@ export default function Lightbox({
     <FocusLock>
       <Section
         css={`
-          position: absolute;
+          position: fixed;
           width: 100vw;
           height: 100vh;
           top: 0;

src/utils/hooks/useScrollLock.js

@@ -0,0 +1,6 @@
+export default function useScrollLock() {
+  const enableScrollLock = () => document.documentElement.setAttribute('data-scroll-lock', true);
+  const disableScrollLock = () => document.documentElement.setAttribute('data-scroll-lock', false);
+
+  return { enableScrollLock, disableScrollLock };
+}

src/utils/index.js

@@ -14,6 +14,7 @@ export { default as useInterval } from './hooks/useInterval';
 export { default as useMaze } from './hooks/useMaze';
 export { default as useLocale } from './hooks/useLocale';
 export { default as useLocalStorage } from './hooks/useLocalStorage';
+export { default as useScrollLock } from './hooks/useScrollLock';
 export { default as useSelection } from './hooks/useSelection';
 export { default as useSocialShare } from './hooks/useSocialShare';
 export { default as useEventListener } from './hooks/useEventListener';

src/utils/style/index.css

@@ -50,6 +50,10 @@
   --color-text: hsl(var(--hsl-crazy-text));
 }
 
+[data-scroll-lock="true"] {
+  overflow: hidden;
+}
+
 @media screen and (min-width: 600px) {
   :root {
     --width-header: 0.75fr;