{"id":41,"date":"2019-09-25T04:35:51","date_gmt":"2019-09-25T04:35:51","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=41"},"modified":"2019-10-21T04:11:01","modified_gmt":"2019-10-21T04:11:01","slug":"different-layouts","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/different-layouts\/","title":{"rendered":"Different Layouts"},"content":{"rendered":"\n

Layouts<\/a><\/h4>\n\n\n\n
Default Layout<\/h5>\n\n\n\n
\"\"<\/a>
Default Layout<\/figcaption><\/figure><\/div>\n\n\n\n

This is the default layout of your template, when you download the project from ThemeForest<\/strong> and builds it after the installation procedure, you will find that your template uses this layout by default. You don’t need to do anything to use this layout.<\/p>\n\n\n\n

Horizontal Layout<\/h5>\n\n\n\n
\"\"<\/a>
Horizontal Layout<\/figcaption><\/figure><\/div>\n\n\n\n

This is the Horizontal Layout of the template. You can make this layout as default for your template by following the steps given below:<\/p>\n\n\n\n

Step 1: <\/strong>Go to src->container<\/code> folder & open the App.js<\/code> file.<\/p>\n\n\n\n

Step 2:<\/strong> Search for the condition if (location.pathname === '\/')<\/code> in the file.<\/p>\n\n\n\n

Step 3:<\/strong> Now replace the given code:<\/p>\n\n\n\n

if (location.pathname === '\/') {
    if (user === null) {
        return (<Redirect to={'\/signin'} \/>);
    } else {
       return (<Redirect to={'\/app\/dashboard\/ecommerce'} \/>);
    }
  }
  return (
     <RctThemeProvider>
        <NotificationContainer \/>
        <InitialPath
          path={`${match.url}app`}
          authUser={user}
          component={RctDefaultLayout}
        \/>
     ... <\/pre>\n\n\n\n
with the following code<\/p>\n\n\n\n
if (location.pathname === '\/') {
   if (user === null) {
      return (<Redirect to={'\/signin'} \/>);
   } else {
      return (<Redirect to={'\/horizontal\/dashboard\/saas'} \/>); \/\/ Return statement changed
   }
  }
  return (
    <RctThemeProvider>
      <NotificationContainer \/>
      <InitialPath
        path={`${match.url}horizontal`} \/\/ Path url changed
        authUser={user}
        component={HorizontalLayout} \/\/ Component changed
     \/>
    ... <\/pre>\n\n\n\n
Agency Layout <\/h5>\n\n\n\n
\"\"<\/a>
Agency Layout<\/figcaption><\/figure><\/div>\n\n\n\n
This is the Agency Layout of the template. You can make this layout as default for your template by following the steps given below:<\/p>\n\n\n\n
Step 1: <\/strong>Go to src->container<\/code> folder & open the App.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Search for the condition if (location.pathname === '\/')<\/code> in the file.<\/p>\n\n\n\n
Step 3:<\/strong> Now replace the given code:<\/p>\n\n\n\n
if (location.pathname === '\/') {
    if (user === null) {
      return (<Redirect to={'\/signin'} \/>);
    } else {
       return (<Redirect to={'\/app\/dashboard\/ecommerce'} \/>);
    }
  }
  return (
     <RctThemeProvider>
        <NotificationContainer \/>
       <InitialPath
          path={`${match.url}app`}
          authUser={user}
          component={RctDefaultLayout}
       \/>
       ... <\/pre>\n\n\n\n
with the following code:<\/p>\n\n\n\n
if (location.pathname === '\/') {
    if (user === null) {
       return (<Redirect to={'\/signin'} \/>);
    } else {
       return (<Redirect to={'\/agency\/dashboard\/agency'} \/>); \/\/ Return statement changed
    }
   }
   return (
     <RctThemeProvider>
        <NotificationContainer \/>
        <InitialPath
        path={`${match.url}agency`} \/\/ Path url changed
        authUser={user}
        component={AgencyLayout} \/\/ Component changed
     \/>
     ... <\/pre>\n\n\n\n
Boxed Layout <\/h5>\n\n\n\n
\"\"<\/a>
Boxed Layout<\/figcaption><\/figure><\/div>\n\n\n\n
This is the Boxed Layout of the template. You can make this layout as default for your template by following the steps given below:<\/p>\n\n\n\n
Step 1: <\/strong>Go to src->container<\/code> folder & open the App.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Search for the condition if (location.pathname === '\/')<\/code> in the file.<\/p>\n\n\n\n
Step 3:<\/strong> Now replace the given code:<\/p>\n\n\n\n
if (location.pathname === '\/') {
    if (user === null) {
       return (<Redirect to={'\/signin'} \/>);
    } else {
       return (<Redirect to={'\/app\/dashboard\/ecommerce'} \/>);
    }
   }
   return (
      <RctThemeProvider>
         <NotificationContainer \/>
         <InitialPath
            path={`${match.url}app`}
            authUser={user}
            component={RctDefaultLayout}
         \/>
        ... <\/pre>\n\n\n\n
with the following code: <\/p>\n\n\n\n
if (location.pathname === '\/') {
   if (user === null) {
       return (<Redirect to={'\/signin'} \/>);
   } else {
       return (<Redirect to={'\/boxed\/dashboard\/news'} \/>); \/\/ Return statement changed
   }
  }
  return (
      <RctThemeProvider>
          <NotificationContainer \/>
          <InitialPath
             path={`${match.url}boxed`} \/\/ Path url changed
             authUser={user}
             component={RctBoxedLayout} \/\/ Component changed
          \/>
          ...   
<\/pre>\n\n\n\n
Set Horizontal Menu In Default Layout <\/h5>\n\n\n\n
\"\"<\/a>
Default Layout With Horizontal Menu <\/figcaption><\/figure><\/div>\n\n\n\n
This is the Horizontal Layout of the template. If you want to make this as your default layout, please follow the steps given below:<\/p>\n\n\n\n
Step 1:<\/strong> Go to src->components->RctAppLayout<\/code> & open the index.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Search for the Sidebar component in the file, as given below:<\/p>\n\n\n\n
<Sidebar
     sidebar={this.renderSidebar()}
     open={windowWidth <= 1199 ? navCollapsed : false}
     ... >
                        
     <div className=\"app-container\">
          <div className=\"rct-app-content\">
               <div className=\"app-header\">
                    {this.renderHeader()}
               <\/div>
               <div className=\"rct-page\">
                    {this.renderPage()}
               <\/div>
          <\/div>
     <\/div>
<\/Sidebar> <\/pre>\n\n\n\n
Step 3:<\/strong> Cut the div \"app-container\"<\/code> section from the Sidebar<\/code> component and paste it outside the Sidebar<\/code> component in the file. Now remove the Sidebar<\/code> component from the file.<\/p>\n\n\n\n
Step 4:<\/strong> Add the following code to the className = \"rct-page\"<\/code> in the div \"app-container\"<\/code>:<\/p>\n\n\n\n
<HorizontalMenu\/>\n\n<\/pre>\n\n\n\n
Like this: <\/p>\n\n\n\n
<div className=\"app-container\">
      <div className=\"rct-app-content\">
           <div className=\"app-header\">
                 {this.renderHeader()}
           <\/div>
           <div className=\"rct-page\">
                  <HorizontalMenu\/> \/\/ Added Code
                  {this.renderPage()}
           <\/div>
      <\/div>
<\/div> <\/pre>\n\n\n\n
Step 5:<\/strong> Add the following code in the file: <\/p>\n\n\n\n
import HorizontalMenu from 'Components\/HorizontalMenu\/HorizontalMenu'; <\/pre>\n\n\n\n
Like <\/p>\n\n\n\n
\/\/ Components
 \u2026
 import ThemeOptions from 'Components\/ThemeOptions\/ThemeOptions';
 import HorizontalMenu from 'Components\/HorizontalMenu\/HorizontalMenu'; \/\/ Latest Import<\/pre>\n\n\n\n
Step 6:<\/strong> Now Go to src->assets->scss->custom<\/code> and open the _main.scss<\/code> file. Search for the app-main-container<\/code> & change the value of display<\/code> key from flex<\/code> to block<\/code>. Like this: <\/p>\n\n\n\n
.app-main-container {
     display: block;
     flex-wrap: nowrap;
 }<\/pre>\n\n\n\n
Step 7:<\/strong>  Go to src->components->HorizontalMenu<\/code> & open the NavLinks.js<\/code> file. Search for the \"path\": \"\/horizontal\/...<\/code> & just replace the keyword horizontal<\/code> with the keyword app<\/code> .<\/p>\n\n\n\n
\n\n\n\n
Modes<\/a><\/h4>\n\n\n\n
Mini Sidebar Mode<\/h5>\n\n\n\n
\"\"<\/a>
MiniSidebar Layout<\/figcaption><\/figure><\/div>\n\n\n\n
This is the mini sidebar layout for the template. If you want to make this as your default layout, please follow the steps given below:<\/p>\n\n\n\n
Step 1:<\/strong> Go to src->constants<\/code> folder & open the AppConfig.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Change the value of miniSidebar<\/code> to true in the following code:<\/p>\n\n\n\n
const AppConfig = {
    \u2026
    miniSidebar: true,    \/\/ Set this to true for MiniSidebar Layout.<\/pre>\n\n\n\n
RTL Mode <\/h5>\n\n\n\n
\"\"<\/a>
RTL Mode<\/figcaption><\/figure><\/div>\n\n\n\n
This is the RTL layout for the template. If you want to make this as your default layout, please follow the steps given below:<\/p>\n\n\n\n
Step 1:<\/strong> Go to src->constants<\/code> folder & open the AppConfig.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Change the value of rtlLayout<\/code> to true in the following code:<\/p>\n\n\n\n
const AppConfig = {
    \u2026
    rtlLayout: true,   \/\/ Set this to true for RTL Layout.
    \u2026<\/pre>\n\n\n\n
Dark Mode <\/h5>\n\n\n\n
\"\"<\/a>
Dark Mode<\/figcaption><\/figure><\/div>\n\n\n\n
This is the Dark Mode for the template. If you want to make this as your default, please follow the steps given below:<\/p>\n\n\n\n
Step 1:<\/strong> Go to src->constants<\/code> folder & open the AppConfig.js<\/code> file.<\/p>\n\n\n\n
Step 2:<\/strong> Change the value of darkMode<\/code> to true in the following code:<\/p>\n\n\n\n
const AppConfig = {
    \u2026
    darkMode: true,   \/\/ Set this to true for Dark Mode.
    \u2026<\/pre>\n
\n    
\n    \n                        <\/i>\n                    <\/a>\n    2    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    1<\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
Layouts Default Layout This is the default layout of your template, when you download the project from ThemeForest and builds it after the installation procedure, you will find that your template uses this layout by default. You don’t need to do anything to use this layout. Horizontal Layout This is the Horizontal Layout of the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/41"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":20,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":702,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/41\/revisions\/702"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now save the file and open up the browser window and open the url: http:\/\/localhost:3000\/<\/a>.<\/p>\n\n\n\n