# Layouts

Layouts in Pages help you to customize the main view of your app, this comes with pre built layout options that will be updated over time. Pages now comes with 5 Different layouts and each layout will have 7 themes.

Location : @pages/layouts\
\
All Layouts are extended from the super class rootLayout which is located in `@pages/layouts/root`

## Root Layout

### API <a href="#api" id="api"></a>

| Property         | Description            | Type    | Default | Scope  |
| ---------------- | ---------------------- | ------- | ------- | ------ |
| contentClass     | Set content div class  | string  | null    | Public |
| pageWrapperClass | Set Page Wrapper Class | string  | null    | Public |
| footer           | Show / Hide Footer     | boolean | true    | Public |

### Functions

These functions can be called in any sub class layout.

```
changeLayout(type:string);
```

Set body class layout. eg : - "menu-pinned' <br>

```
openQuickView()
```

Open Quick view<br>

```
openSearch()
```

Open Quick Search<br>

```
toggleMenuPin($e)
```

Quick function to toggle fixed sidebar menu<br>

```
toggleMenuDrawer()
```

Menu drawer in side bar. This function will close and open it.<br>

```
toggleMobileSidebar()
```

Open and Close sidebar menu on mobile only<br>

```
toggleSecondarySideBar()
```

Open and Close secondary sidebar on mobile only<br>

```
toggleHorizontalMenuMobile()
```

Open and Close Sidebar on mobile - Implemented for Horizontal app menu\ <br>

## Sub Layouts

Layouts that are implemented extending root layout

### **condensed**

One of our most popular Layouts, Pages Condensed offers a wide range of responsive space specifically for dashboards with heavy content. \
\
Location -`@pages/layouts/condensed`\
\ <br>

### **casual**

A new tone of voice – a relaxed, friendly, joyful layout that quickly makes the user experience more personal, casual and fun!. Comes with horizontal layout and sidebar option \
\
Location -`@pages/layouts/casual`\
\ <br>

### **corporate**

Corporate is a bold, cool Layout that elevates your content by utilizing a clean layout and a simple, open interface. Contains boxed version and secondary sidebar. \
\
Location -`@pages/layouts/corporate`\
\ <br>

### **simplywhite**

In a world of complexity, Simplicity defeats stress. Simply white is an open simple, minimal yet striking layout, built to combat stress. Contains boxed version and secondary sidebar. \
\
Location -`@pages/layouts/simplywhite`\
\ <br>

### **executive**

A Professional template with a timeless look, best suited to quickly create a serious organized experience. Comes with horizontal layout and sidebar option \
\
Location -`@pages/layouts/executive`<br>

## Where are the styles imported?

Styles are imported for each layout SASS file. For example executive styles are imported from `@pages/layouts/executive/executive.component.scss`

{% hint style="info" %}
Note all components are styles are imported directly. You may wish to include what you use or import it directly to the component you use
{% endhint %}


---

# 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://docs.pages.revox.io/angular/untitled.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.