diff --git a/src/app.tsx b/src/app.tsx index d1aac6f..d661ae6 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -41,6 +41,7 @@ function AppLayout(props: { children: any }) { setRightBarVisible(true); } + // On mobile, leftBarSize() is always 0 (overlay mode) const newWidth = window.innerWidth - leftBarSize() - rightBarSize(); setCenterWidth(newWidth); }; @@ -55,6 +56,7 @@ function AppLayout(props: { children: any }) { // Recalculate when bar sizes change (visibility or actual resize) createEffect(() => { + // On mobile, leftBarSize() is always 0 (overlay mode) const newWidth = window.innerWidth - leftBarSize() - rightBarSize(); setCenterWidth(newWidth); }); diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx index 4fdc023..4b5501c 100644 --- a/src/components/Bars.tsx +++ b/src/components/Bars.tsx @@ -4,7 +4,6 @@ import { onMount, createEffect, createSignal, - createMemo, Show, For, onCleanup diff --git a/src/context/bars.tsx b/src/context/bars.tsx index 49063cc..dda1ec7 100644 --- a/src/context/bars.tsx +++ b/src/context/bars.tsx @@ -1,4 +1,11 @@ -import { Accessor, createContext, useContext, createMemo } from "solid-js"; +import { + Accessor, + createContext, + useContext, + createMemo, + onMount, + onCleanup +} from "solid-js"; import { createSignal } from "solid-js"; import { hapticFeedback } from "~/lib/client-utils"; @@ -41,10 +48,26 @@ export function BarsProvider(props: { children: any }) { const [leftBarVisible, _setLeftBarVisible] = createSignal(true); const [rightBarVisible, _setRightBarVisible] = createSignal(true); const [barsInitialized, setBarsInitialized] = createSignal(false); + const [windowWidth, setWindowWidth] = createSignal( + typeof window !== "undefined" ? window.innerWidth : 1024 + ); let leftBarSized = false; let rightBarSized = false; + // Track window width reactively for mobile/desktop detection + onMount(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener("resize", handleResize); + + onCleanup(() => { + window.removeEventListener("resize", handleResize); + }); + }); + const wrappedSetLeftBarSize = (size: number) => { if (!barsInitialized()) { // Before initialization, capture natural size @@ -88,6 +111,9 @@ export function BarsProvider(props: { children: any }) { // Return 0 if hidden (natural size is 0), otherwise return synced size when initialized const naturalSize = _leftBarNaturalSize(); if (naturalSize === 0) return 0; // Hidden + // On mobile (<768px), always return 0 for layout (overlay mode) + const isMobile = windowWidth() < 768; + if (isMobile) return 0; return barsInitialized() ? syncedBarSize() : naturalSize; }); diff --git a/src/routes/blog/index.tsx b/src/routes/blog/index.tsx index b01c74f..85e2a45 100644 --- a/src/routes/blog/index.tsx +++ b/src/routes/blog/index.tsx @@ -22,7 +22,7 @@ export default function BlogIndex() {