Skip to content

fixed 500 error on refresh -3 #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AdamVacha merged 1 commit into from
Apr 23, 2025
Merged

fixed 500 error on refresh -3 #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 40 additions & 33 deletions src/routes/lessons/subject/[subject]/module/[module]/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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}
Expand Down Expand Up @@ -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>
Expand All @@ -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>
4 changes: 3 additions & 1 deletion src/routes/lessons/subject/[subject]/module/[module]/lesson/[lesson]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down