Layout

Understanding template layouts will help you create a page with your desired layout.

Layout Types

Each layout is coming with its unique components. There are 3 Layout Types :

1. Blank Layout

2. Full Layout

Blank Layout

This is useful if you want to create pages without any other content except page content like the Authentication page where you don't need a sidebar, topbar, navbar, right bar, footer, etc.

Basically, this is a simple blank page and you can create everything from scratch.

Example:

How to Create a Page with Blank Layout?

To create a page with a blank layout, add the new page's route to publicRoutes in the src/routes/allRoutes.js file. Tada!! it will automatically render with the blank layout.

You can check how to create a new page from here.

Example :

import newPage from "../pages/newPage"

const publicRoutes = [
    { path: "/new-page", component: <newPage /> }                                          
]

Full Layout

This is a full layout of this template. this layout comes with the below components :

1. Topbar

2. Menu

3. Footer

How to Create a Page with Full Layout?

To create a page with a full layout, add the new page's route to privateRoutes in the src/routes/allRoutes.js file. Tada!! it will automatically render with the full layout.

Example :

import newPage from "../pages/newPage"

const privateRoutes = [
    { path: "/new-page", component: <newPage /> }                                          
]