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",
 },