Reactify
  • Introduction
  • Folder Structure
  • Reactify Redux Thunk/Saga
    • Installation
    • Different Layouts
      • Adding Menu/Component In Different Layouts
    • Adding Widgets
    • Build an App from Scratch
    • Seed Project
    • Themes
    • Authentication
    • Translate The App(Multi Language Support)
    • UI Components
      • Alerts
      • App Bar
      • Avatars
      • Badges
      • Bottom Navigation
      • Buttons
      • Cards
      • Card Masonary
      • Chip
      • Dialogs
      • Divider
      • Drawers
      • Expansion Panel
      • Grid List
      • List
      • Menu
      • Pop Over & ToolTip
      • Progress
      • Snackbar
      • Selection Controls
    • Style Customization
    • Create a Docker Image
    • Instant Search With Algolia
    • Deployment
  • Reactify Laravel
    • Folder Structure
    • Installation Reactify Laravel
  • FAQ's(Frequently Asked Questions)
  • Credits
  • Changelog
  • Customer Support
Powered by GitBook
On this page
  • Layouts
  • Default Layout
  • Horizontal Layout
  • Agency Layout
  • Boxed Layout
  • Set Horizontal Menu In Default Layout
  • Modes
  • Mini Sidebar Mode
  • RTL Mode
  • Dark Mode
  1. Reactify Redux Thunk/Saga

Different Layouts

Reactify comes with four handcrafted layouts & three different modes. Read the documentation given below carefully to use the following layouts as default for your template.

PreviousInstallationNextAdding Menu/Component In Different Layouts

Last updated 6 years ago

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 template. You can make this layout as default for your template by following the steps given below:

Step 1: Go to src->container folder & open the App.js file.

Step 2: Search for the condition if (location.pathname === '/') in the file.

Step 3: Now replace the given code:

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}
				/>
				...

with the following code:

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
				/>
				...

Agency Layout

This is the Agency Layout of the template. You can make this layout as default for your template by following the steps given below:

Step 1: Go to src->container folder & open the App.js file.

Step 2: Search for the condition if (location.pathname === '/') in the file.

Step 3: Now replace the given code:

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}
				/>
				...

with the following code:

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
				/>
				...

Boxed Layout

This is the Boxed Layout of the template. You can make this layout as default for your template by following the steps given below:

Step 1: Go to src->container folder & open the App.js file.

Step 2: Search for the condition if (location.pathname === '/') in the file.

Step 3: Now replace the given code:

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}
				/>
				...

with the following code:

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
				/>
				...

Set Horizontal Menu In Default Layout

This is the Horizontal Layout of the template. If you want to make this as your default layout, please follow the steps given below:

Step 1: Go to src->components->RctAppLayout & open the index.js file.

Step 2: Search for the Sidebar component in the file, as given below:

<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>

Step 3: Cut the div "app-container" section from the Sidebar component and paste it outside the Sidebar component in the file. Now remove the Sidebar component from the file.

Step 4: Add the following code to the className = "rct-page" in the div "app-container":

<HorizontalMenu/>

Like this:

<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>

Step 5: Add the following code in the file:

import HorizontalMenu from 'Components/HorizontalMenu/HorizontalMenu';

Like

// Components
...
import ThemeOptions from 'Components/ThemeOptions/ThemeOptions';
import HorizontalMenu from 'Components/HorizontalMenu/HorizontalMenu'; // Latest Import

Step 6: Now Go to src->assets->scss->custom and open the _main.scss file. Search for the app-main-container & change the value of display key from flex to block. Like this:

.app-main-container {
	display: block;
	flex-wrap: nowrap;
}

Step 7: Go to src->components->HorizontalMenu & open the NavLinks.js file. Search for the "path": "/horizontal/... & just replace the keyword horizontal with the keyword app .

Modes

Mini Sidebar Mode

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:

Step 1: Go to src->constants folder & open the AppConfig.js file.

Step 2: Change the value of miniSidebar to true in the following code:

const AppConfig = {
   ...
   miniSidebar: true,    // Set this to true for MiniSidebar Layout.

RTL Mode

This is the RTL layout for the template. If you want to make this as your default layout, please follow the steps given below:

Step 1: Go to src->constants folder & open the AppConfig.js file.

Step 2: Change the value of rtlLayout to true in the following code:

const AppConfig = {
   ...
   rtlLayout: true,   // Set this to true for RTL Layout.
   ...

Dark Mode

This is the Dark Mode for the template. If you want to make this as your default, please follow the steps given below:

Step 1: Go to src->constants folder & open the AppConfig.js file.

Step 2: Change the value of darkMode to true in the following code:

const AppConfig = {
   ...
   darkMode: true,   // Set this to true for Dark Mode.
   ...

Now save the file and open up the browser window and open the url: .

http://localhost:3000/
Default Layout
Horizontal Layout
Agency Layout
Boxed Layout
Horizontal Layout
MiniSidebar Layout
Dark Mode