Merge pull request #59 from AdamVacha/prod-update2

fixed 500 error on refresh -3

Author: AdamVacha

src/routes/lessons/subject/[subject]/module/[module]/+layout.svelte

@@ -12,30 +12,38 @@
 	let modules = $derived(data?.allModules || []);
 
 	// Track if module panel is open
-	let isModulesPanelOpen = $state(window.innerWidth >= 768);
-	
+	let isModulesPanelOpen = $state(false);
+
 	// On mobile, the sidebar is fixed position and overlays the content
-	let isMobile = $state(window.innerWidth < 768);
-	
-	// Update mobile status on resize
-	function handleResize() {
-		const newIsMobile = window.innerWidth < 768;
-		if (newIsMobile !== isMobile) {
-			isMobile = newIsMobile;
-		}
-		
-		// Automatically close sidebar on mobile when resizing down
-		if (isMobile && isModulesPanelOpen && window.innerWidth < 480) {
-			isModulesPanelOpen = false;
-		}
-		
-		// Automatically open sidebar on desktop
-		if (!isMobile && !isModulesPanelOpen) {
-			isModulesPanelOpen = true;
+	let isMobile = $state(false);
+	let windowWidth = $state(0);
+
+	// Use a derived value instead of an event listener
+	$effect(() => {
+		if (windowWidth > 0) {
+			// Only run this when windowWidth has been set (client-side)
+			isMobile = windowWidth < 768;
+
+			// Auto close on very small screens
+			if (isMobile && isModulesPanelOpen && windowWidth < 480) {
+				isModulesPanelOpen = false;
+			}
+
+			// Auto open on desktop
+			if (!isMobile && !isModulesPanelOpen) {
+				isModulesPanelOpen = true;
+			}
 		}
-	}
-	
+	});
+
 	onMount(() => {
+		windowWidth = window.innerWidth;
+		isModulesPanelOpen = window.innerWidth >= 768;
+
+		const handleResize = () => {
+			windowWidth = window.innerWidth;
+		};
+
 		window.addEventListener('resize', handleResize);
 		return () => {
 			window.removeEventListener('resize', handleResize);
@@ -48,28 +56,27 @@
 	}
 </script>
 
-<div class="relative flex h-full w-full flex-col md:flex-row gap-2 sm:gap-4 p-1 sm:p-2 md:p-4 overflow-hidden">
+<div
+	class="relative flex h-full w-full flex-col gap-2 overflow-hidden p-1 sm:gap-4 sm:p-2 md:flex-row md:p-4"
+>
 	<!-- Overlay for mobile when sidebar is open -->
 	{#if isMobile && isModulesPanelOpen}
-		<div 
-			class="fixed inset-0 bg-black bg-opacity-50 z-20"
-			onclick={toggleModulesPanel}
-		></div>
+		<div class="fixed inset-0 z-20 bg-black bg-opacity-50" onclick={toggleModulesPanel}></div>
 	{/if}
 
 	<!-- Modules Sidebar - Fixed on mobile, normal on desktop -->
 	<div
-		class="sidebar-container transition-all duration-300 z-30"
+		class="sidebar-container z-30 transition-all duration-300"
 		class:fixed={isMobile}
 		class:inset-y-0={isMobile}
 		class:left-0={isMobile}
 		class:w-64={isModulesPanelOpen}
 		class:w-0={!isModulesPanelOpen}
 		class:md:relative={true}
 	>
-		<div 
-			class="h-full overflow-hidden transition-all duration-300 bg-surface-100 dark:bg-surface-800 rounded-r-lg shadow-lg" 
-			class:w-64={isModulesPanelOpen} 
+		<div
+			class="h-full overflow-hidden rounded-r-lg bg-surface-100 shadow-lg transition-all duration-300 dark:bg-surface-800"
+			class:w-64={isModulesPanelOpen}
 			class:w-0={!isModulesPanelOpen}
 		>
 			{#if isModulesPanelOpen}
@@ -113,7 +120,7 @@
 	</div>
 
 	<!-- Main Content Area - Full width on mobile -->
-	<div class="flex-1 rounded-lg overflow-hidden">
+	<div class="flex-1 overflow-hidden rounded-lg">
 		{@render children?.()}
 	</div>
 </div>
@@ -123,10 +130,10 @@
 	:global(body.sidebar-open) {
 		overflow: hidden;
 	}
-	
+
 	/* Ensure the parent container fills available height */
 	:global(html, body, .app-shell, .app-shell-content) {
 		height: 100%;
 		overflow-x: hidden;
 	}
-</style>
+</style>

src/routes/lessons/subject/[subject]/module/[module]/lesson/[lesson]/+page.svelte

@@ -364,7 +364,9 @@
 				{lesson?.title || 'Loading...'}
 			</h1>
 		</div>
-		<div class:hidden={lesson?.id !== 1}>
+		<div
+			class:hidden={lesson?.id !== 1 || lesson?.id !== 29 || lesson?.id !== 58 || lesson?.id !== 82}
+		>
 			<p class="text-sm sm:text-base">Modify the code below and see the result in real time!</p>
 		</div>
 	</header>