Layout

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

Layout Types

Each layout is coming with it's unique components. There are 3 Layout Types :

1. Blank Layout

2. Default Layout

Blank Layout

This is useful if you want to create pages without any other content except page's content like Authentication page where you don't need sidebar, topbar, navbar, rightbar, 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 blank layout, add the new page's route to publicRoutes in src/routes/index.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 below components :

1. Topbar

2. Menu

3. Footer

4. Rightbar (template config)

You can change the styles and structure of topbar & menu components easily with Theme Configuration features.

This layout has 2 types : 1. Horizontal Layout 2. Vertical Layout.

Info

Both Vertical and Horizontal layouts are comes with it's own components. basically these both are different from it's navigation types.

Vertical Layout has Sidebar component to handle template's navigation.

Horizontal Layout has Navbar component to handle template's navigation.

How to change layout from Vertical to Horizontal or vise versa ?

Only one change to make horizontal/vertical layouts on all the pages. Set layoutType: layoutTypes.HORIZONTAL in the INIT_STATE in the src/store/layout/reducer.js if you want a Horizontal layout, and layoutType: layoutTypes.VERTICAL if you want a vertical layout.

How to Create a Page with Full Layout ?

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

Example :

import newPage from "../pages/newPage"

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

Vertical Layout

To modify/extend Vertical layout, navigate to src/components/VerticalLayout/index.js.

// Layout Related Components
import Header from "./Header"
import Sidebar from "./Sidebar"
import Footer from "./Footer"
import Rightbar from "../CommonForBoth/RightSidebar"
                                    
class Layout extends Component {
    render() {
        return (
            <>
                <div id="layout-wrapper">
                    // topbar
                    <Header />

                    // sidebar (navigation menu)
                    <Sidebar />

                    // page content
                        <div className="main-content">
                            {props.children}
                        </div>

                    // footer
                    <Footer />
                </div>

                // rightbar
                <Rightbar />
            </>
        )
    }
}

export default Layout;

Header.js : this is the component for layout's topbar. you can overwrite/change layout's topbar as per your need by replacing it's content.

Sidebar.js : this is the component for layout's navigation menu. you can overwrite/change layout's navigation styles & menus as per your need by replacing it's content.

Footer.js : this is the component for layout's footer. you can overwrite/change footer's navigation footer content as per your need.

Rightbar.js : this is the component for layout's rightbar. basically rightbar is used for theme configurations. you can also replace it with your own need.

Horizontal Layout

To modify/extend Horizontal layout, navigate to src/components/HorizontalLayout/index.js.

  // Layout Related Components
  import Header from "./Header"
  import Navbar from "./Navbar"
  import Footer from "./Footer"
  import Rightbar from "../CommonForBoth/RightSidebar"
                                      
  class Layout extends Component {
      render() {
          return (
              <>
                  <div id="layout-wrapper">
                      // topbar
                      <Header />
  
                      // navbar (navigation menu)
                      <Navbar />
  
                      // page content
                          <div className="main-content">
                              {props.children}
                          </div>
  
                      // footer
                      <Footer />
                  </div>
  
                  // rightbar
                  <Rightbar />
              </>
          )
      }
  }
  
  export default Layout;

All of the props & usage for Horizontal Layout are same as Vertical Layout.