Merged in feat/SW-2800-lightbox-history-state (pull request #2147)

feat(SW-2800): closing image gallery and lightbox on using browser navigation

* feat(SW-2800): closing image gallery and lightbox on using browser navigation


Approved-by: Linus Flood

apps/scandic-web/components/Lightbox/Gallery/gallery.module.css

@@ -53,6 +53,10 @@
     display: none;
   }
 
+  .galleryContainer {
+    align-content: start;
+  }
+
   .closeButton {
     justify-self: start;
   }

apps/scandic-web/components/Lightbox/index.tsx

@@ -46,6 +46,20 @@ export default function Lightbox({
     )
   }
 
+  useEffect(() => {
+    function handlePopState() {
+      handleClose()
+    }
+
+    window.history.pushState(null, "", window.location.href)
+    window.addEventListener("popstate", handlePopState)
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [])
+
   return (
     <ModalOverlay
       isOpen={isOpen}
@@ -79,7 +93,7 @@ export default function Lightbox({
                 ) : (
                   <Gallery
                     images={images}
-                    onClose={onClose}
+                    onClose={handleClose}
                     onSelectImage={(image) => {
                       setSelectedImageIndex(
                         images.findIndex((img) => img === image)