What is the intended use of AppLayout

[lordnynex]

I love the components and have been trying to use them in a project but am having a lot of trouble. I am a backend dev by trade so I'm dealing with the learning curve of react along with cloudspace components.

My question is what is the intended use of AppLayout? I'm trying to create a generic layout template, but since the components has props for content and contentHeader I can't understand what the intent is. To me it seems like a logical desire for the content component to set the contentHeader, but that seems to require explicitly including <AppLayout> in every component/page.

With some outside help I managed to sortof do this using slots, but now the size of the contentHeader gets mangled. Here is an example https://stackblitz.com/edit/react-ts-zu3yv6?file=App.tsx

I know you guys have already said the component demo's are not open source, but I hope you reconsider open sourcing them. Without clear examples to reference; I've had a very difficult time trying to understand how things are put together.

[lordnynex]

ok I got it working reliably with slots. That stackblitz has a bug. I think the slots approach is a pretty slick way of dealing with this. I'm hoping I didn't miss something obvious by doing it this way.

[timogasda]

Hello,

despite of what the name "App layout" might suggest, the component doesn't necessarily need to be one global instance per application, but it can be. Picking between one global App layout or one "local" App layout per page depends on your use-case and general code architecture. Both approaches are valid but might have different pros and cons.

If you find it difficult to synchronize content header and content for one App layout instance, you can use one App layout per page. For example: https://codesandbox.io/s/inspiring-meadow-06e5ws?file=/src/App.jsx

You can also use hooks to communicate changes to your global App layout from the content. For example: https://codesandbox.io/s/friendly-kare-4b7w8l?file=/src/App.jsx

Lastly, I want to point out that we are actually working on a new way to integrate the layout of a page (header + content) more easily into one component. The new component will most likely be called ContentLayout and you can find the current work-in-progress PR here: #67. There is no ETA when this will be implemented, but feel free to watch that PR for updates.

I hope that helps! :)

[lordnynex]

Thank you! 🙏🏻

[quisido]

I've had the best luck by wrapping each "feature" in an App Layout, essentially a using a different AppLayout component whenever the breadcrumbs change.