> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/reactify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts.md).

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

## Layouts

### Default Layout

![Default Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEsfEwjzbplbaaRvxbl%2F-LEsgmazhbhewU2zsL7G%2FdefaultLayout.png?alt=media\&token=4b95e57f-63f7-45d1-becb-9f21ced06193)

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

![Horizontal Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbhMVbocBv721PTAYdp%2F-LbhMvEaZArudeyoA_kn%2FSelection_003.png?alt=media\&token=adfb498e-046f-4d3e-accf-596d62709586)

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

![Agency Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LEsfEwjzbplbaaRvxbl%2F-LEsi8hrOwsyBlCSO0c0%2FboxedLayout.png?alt=media\&token=e0018686-eafc-4d7c-a1da-9759238e0198)

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

![Boxed Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LZoFwx0-6lRAIGOzZ53%2F-LZoGkZlTEkB6Vbp8FxM%2FScreenshot%20from%202019-02-28%2018-52-53.png?alt=media\&token=41c19bfc-ea05-482b-bb12-bfea83e443ab)

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

![Horizontal Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LZoIlr4Rx3urf6Gp1pD%2F-LZoJ8SGASurF-u2wEtf%2FScreenshot%20from%202019-02-28%2019-03-54.png?alt=media\&token=f40fe617-8457-4e02-8c0f-8393e39c1ed0)

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

Now save the file and open up the browser window and open the url: <http://localhost:3000/>.

## Modes

### Mini Sidebar Mode

![MiniSidebar Layout](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LZo1jzCfNNEoAtAxs5J%2F-LZo3iCifXNgxbIlgaCE%2FScreenshot%20from%202019-02-28%2017-56-28.png?alt=media\&token=d5bb0554-8369-4c26-8a44-38b37438f659)

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

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LZo1jzCfNNEoAtAxs5J%2F-LZo8u83cBLnJps6mfzi%2FScreenshot%20from%202019-02-28%2018-19-11.png?alt=media\&token=9bf15dc5-93c4-48bf-a4f5-81859ea3bcb5)

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

![Dark Mode](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LZo1jzCfNNEoAtAxs5J%2F-LZo9vCNmFABUpHWfcRl%2FScreenshot%20from%202019-02-28%2018-23-13.png?alt=media\&token=d077b450-27b2-42d6-bbf8-06e794a06ab8)

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