> 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

## Layouts

### Default Layout

![Default Layout](/files/-LEsgmazhbhewU2zsL7G)

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](/files/-LbhMvEaZArudeyoA_kn)

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](/files/-LEsi8hrOwsyBlCSO0c0)

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](/files/-LZoGkZlTEkB6Vbp8FxM)

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](/files/-LZoJ8SGASurF-u2wEtf)

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](/files/-LZo3iCifXNgxbIlgaCE)

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

![](/files/-LZo8u83cBLnJps6mfzi)

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](/files/-LZo9vCNmFABUpHWfcRl)

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