> For the complete documentation index, see [llms.txt](https://hypeople-studio.gitbook.io/yoda/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hypeople-studio.gitbook.io/yoda/react-version/folder-structre-and-layout.md).

# Folder Structure & Layout

## Folder Structure

#### `public/`

This folder contains public assets like favicon, style.css, and index.html file

#### `src/`

This folder contains all the pages, components, apps, styles. This is the folder you can develop your project.

***`@assets/`***

This folder keeps images, fonts, icons, and less files.

***`@config/`***

This folder contains config files for your app.

***`@languages/`***

This folder contains language files for your app.

***`@layout/`***

This folder contains layout files with its components.

***`@navigation/`***

This folder contains sidebar menu items.

***`@redux/`***

This folder contains redux files for apps 

***`@router/`***

Router folder contains page routes and the main router

***`@view/`***

View folder contains all Yoda pages like apps component pages. You can write your all pages here. 

## Layout

Yoda has three layout types;

#### Vertical Layout

Vertical layout is the main layout of Yoda. Yoda Main pages use this layout.

#### Horizontal Layout

Horizontal layout is 2. alternative layout, you can change it using customizer.

#### Full Layout

Full layout is using for Login screens, Lock pages, and error pages.

### How to apply layout?

You can apply from router. When you create new page on `src/router/routes/pages.js`

```
{
    path: "/components/data-display/badge",
    component: lazy(() => import("../../view/components/data-display/badge")),
    layout: "VerticalLayout",
 },
```