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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.