Understanding the Layout Structure

Each profile has it's own layout, giving you full control over the navigaton and style of the template for each user profile.

For each component view (collection / active / create / delete) assigned to the user profile - a partial component is created that contains all the functionality required to make the view work. Layout is deliberately split into seperate components so that layouts can be reused.

The same layout should be applied to components that are visually similar.

You may have one layout for root components, and another one for nested components.

Component names are passed to the layout components allowing some customisation between components.

You should use as few layouts as possible to reduce the overall size of your app.

Layout structure

For each layout, the following files are created

1. Page View: Layout wrapped around the page component - includes actions, page headers / footers etc.
2. Collection View: Layout wrapped around the collection component - refined control over the HTML that wraps the collection component. Control is the collection should be shown as a list, a table etc by switching the wrapper component. Add in header / footer information.
3. Record View: Layout wrapped around the individual records within a collection.
4. Active Page View: Layout wrapped around the active page - includes actions / individual page headers / footers, child navigation etc.
5. Active Record: Layout wrapped around the active record contained within the active page view

Layouts make clever use of slots, so that the layouts only need to control the location and display of the data, rather than trying to work out what data should be shown.