ssr

frontend/src/lib/components/header/Header.svelte

@@ -27,10 +27,10 @@
     }
 
     onMount(() => {
-        // Initial check
-        checkHomePage()
-        checkScroll()
         if (typeof window !== "undefined") {
+            // Initial check
+            checkHomePage()
+            checkScroll()
             // Listen for changes
             window.addEventListener("scroll", checkScroll)
             window.addEventListener("popstate", checkHomePage)
@@ -45,8 +45,10 @@
 
     $: {
         console.log($refresh)
-        checkHomePage()
-        checkScroll()
+        if (typeof window !== "undefined") {
+            checkHomePage()
+            checkScroll()
+        }
     }
     let show = false
     $: console.log(show)

frontend/src/lib/components/header/desktop.svelte

@@ -183,7 +183,7 @@
                             <div class="submenu-img">
                                 <img
                                     src="{`${apiBaseURL}navigation/${$navigation?.id}/${submenu.image?.src}?filter=${
-                                        window?.innerWidth > 500 ? 'xl' : 'm'
+                                        typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                     }`}"
                                     alt="img"
                                 />

frontend/src/lib/components/header/mobile.svelte

@@ -218,7 +218,7 @@
                                     <img
                                         use:pushImages
                                         src="{`${apiBaseURL}navigation/${$navigation.id}/${imgSrc}?filter=${
-                                            window?.innerWidth > 500 ? 'xl' : 'm'
+                                            typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                                         }`}"
                                         alt="img"
                                         class="img img-menu"

frontend/src/lib/components/pagebuilder/form/Formular.svelte

@@ -72,7 +72,7 @@
         }
     }
 
-    let innerWidth = window?.innerWidth || 0
+    let innerWidth = typeof window !== "undefined" ? window?.innerWidth || 0 : 0
     if (typeof window !== "undefined") {
         onMount(() => {
             const handleResize = () => {

frontend/src/lib/components/pagebuilder/image.svelte

@@ -48,12 +48,13 @@
             {#each siteImages as image, i (i)}
                 <swiper-slide class="relative" id="imageSlide">
                     <div class="image-container">
-                        <img
-                            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
-                                window?.innerWidth > 500 ? 'xl' : 'm'
-                            }`}"
-                            alt="Bild"
-                        />
+                        {#if typeof window !== "undefined"}
+                            <img
+                                src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
+                                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
+                                }`}"
+                                alt="Bild"
+                            />{/if}
                     </div>
                 </swiper-slide>
             {/each}
@@ -62,7 +63,9 @@
 {:else if image}
     <div class="image-container single flex">
         <img
-            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${window?.innerWidth > 500 ? 'xl' : 'm'}`}"
+            src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
+                typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
+            }`}"
             alt="Bild"
         />
     </div>

frontend/src/lib/components/pagebuilder/infoBoard.svelte

@@ -22,7 +22,7 @@
         <div class="img-container">
             <img
                 src="{`${apiBaseURL}content/${siteId}/${col.image?.src}?filter=${
-                    window?.innerWidth > 500 ? 'xl' : 'm'
+                    typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                 }`}"
                 alt="img"
             />

frontend/src/lib/components/pagebuilder/mainPicture.svelte

@@ -9,7 +9,7 @@
     <div class="imgContainer">
         <img
             src="{`${apiBaseURL}content/${siteId}/${col.mainPicture?.src}?filter=${
-                window?.innerWidth > 500 ? 'xl' : 'm'
+                typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
             }`}"
             alt="img"
         />

frontend/src/lib/components/pagebuilder/productPreview.svelte

@@ -48,7 +48,7 @@
                     <div class="img-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${product.image?.src}?filter=${
-                                window?.innerWidth > 500 ? 'xl' : 'm'
+                                 typeof window !== 'undefined' && window?.innerWidth > 500 ? 'xl' : 'm'
                             }`}"
                             alt="img"
                         />

frontend/src/lib/components/pagebuilder/teaser.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <main class="teaser">
-    {#if index % 2 == 0 || window?.innerWidth < 1023}
+    {#if index % 2 == 0 || typeof window !== 'undefined' &&  window?.innerWidth < 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
     <div class="content">
@@ -14,7 +14,7 @@
         <p>{site?.teaserDescription}</p>
         <button on:click="{() => navigate(site.path)}">MEHR</button>
     </div>
-    {#if index % 2 == 1 && window?.innerWidth > 1023}
+    {#if index % 2 == 1 && typeof window !== 'undefined' &&  window?.innerWidth > 1023}
         <Image siteId="{site?.id}" siteImages="{site?.teaserImages || []}" />
     {/if}
 </main>