Layouts

Vuely Angular comes with two handcrafted layouts. Read the documentation carefully to use the following layouts in your template.

Default Layout

Vuely Angular by default has traditional admin layout but also provides you flexibility to choose your own.

Default Layout

Mini Sidebar

To enable mini sidebar layout, go tosrc->app->Layouts->VerticalLayout and open VerticalLayout.component.html file, Now search for the collapsed-sidebar class at div <div [dir]="layout" & change its value to true.

VerticalLayout.component.html

'collapsed-sidebar': true

Mini Sidebar Layout

Dark Mode

To enable the dark mode in the template, go tosrc->app->Layouts->VerticalLayout and open VerticalLayout.component.html file & search for the theme-light class at div <div [dir]="layout"

VerticalLayout.component.html

<div [dir]="layout" class="app-main theme-light ....">
    ....
</div>

Now Replace the "theme-light" class with "theme-dark" class. Like mention below :

VerticalLayout.component.html

<div [dir]="layout" class="app-main theme-dark ....">
    ....
</div>

Dark Mode