Layouts
Those components do exactly what its name says. It defines the layout of the application. It simply accepts children as props and render them to the DOM together or without other child components. Because the Layout component is so simple, it can be re-used in other parts of an application, where a developer wants to use the same page layout. What's more, you can create your own reusable layout.
Main Layout Template
The Main Layout is composed of 3 sections :
warning
When using this Main Layout on top of a page, only the content section is going to change according to page children new content.
When to use it
This layout needs to be used for all pages that display specific content for connected user. This layout is wrapped by <ProtectRoute/> component which check if the users is registered and if not it redirect to the route /login.
tip
It also holds the Drawer Provider. That provider gives us a global customizable drawer slider component. Drawers can be triggered from any children from any pages that is wrapped with the Main Layout.
Know all about drawer.
Auth Layout Template
This layout is just a simple wrapper for all authentification forms likes login, register or forgot password.