_layouts are static / Server Side? How "any state set by middleware is available via props.state"
Hi all. I am trying to make a dynamic layout that changes based on the client window width (window.innerWidth) so i can swap the layout when the screen is resized or is too small. I wasn't able to use a layout because it seems like layouts are server side and don't count as Islands so:
- I cant
useEffect
- using a Singal doesnt update _layout and re-render on signal updates it just gets the signal once on load...
Instead I have wrapped my whole app in an Island: https://github.com/ali-layken/BurstUI/blob/main/islands/DynamicLayout.tsx
And this feels wrong...
I read the other posts about layout and I read all I could find online but I am not sure how dynamic resizing plays into the Island Architecture...
I can feel the badness although i am not sure ,like i feel like when the site swaps from desktop to mobile/narrow it is re-rendering "static" content but i am not sure I feel like ive made a mess of the Fresh Architecture.
https://burst.deno.dev <- you can see the cube animation restart when the dynamic layout swaps which makes sense because its an island i don't mind the visual glitch really what i am more worried about is not using Fresh correctly and that slowing down my page loads.GitHub
BurstUI/islands/DynamicLayout.tsx at main · ali-layken/BurstUI
A 3D Website. Contribute to ali-layken/BurstUI development by creating an account on GitHub.
4 Replies
technically IMO it's fine to wrap the whole app in island (as in - it works), but it doesn't feel kosher indeed.
i spent like 10secs looking at your code so i don't know what you're really aiming for, but maybe a single layout would work in your case? check how daisyui is doing a drawer: https://daisyui.com/components/drawer/
Tailwind Drawer Component — Tailwind CSS Components ( version 4 upd...
Tailwind Drawer examples: Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page. component
this is what i'm using: a single
_layout in which this drawer compoent is rendered. some parts in the drawer are islands, so in my case it's more granularHey thanks i noticed while trying to figure this out that Fresh 🍋 docs also resize the exact same way: https://fresh.deno.dev/docs/introduction very cool ill try to figure out how they are doing this.
Introduction | Fresh docs
Fresh is a full stack modern web framework for JavaScript and TypeScript
developers, designed to make it trivial to create high-quality, performant,
and personalized web applications.
they collapse into a sidebar button thats cool
The first response to their url responds with the static content and the TOC is an island. I will have to do something silly to support my layout ill have to like make empty static divs and have the TOC render to either one depending on the screen size since TOC can be an island