Dashplex - Angular13 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent styles,etc..

Dashplex - Angular Admin & Dashboard Template

Layouts

How to convert vertical-menu layout to horizontal-menu layout?

Source Folder Structure

src/
├── app/
|   ├── authentication
|   ├── components
|   ├── pages
|   ├── shared
|   ├── app-routing.module.ts
|   ├── app.component.html
|   ├── app.component.scss
|   ├── app.component.spec.ts
|   ├── app.component.ts
|   └── app.module.ts

Steps to convert vertical-menu to horizontal-menu

By default, You'll be getting vertical menu.

Step 1: Go to the src folder of your project, there you'll find app folder in that open app-routing.module.ts file (src » app » app-routing.module.ts)

const routes: Routes = [
{
	path: '',
	component: ContentLayoutComponent,
	canActivate: [AdminGuard],
	children: content
},
];

Step 3: Here FullLayoutComponent contains a vertical menu and horizontal menu.
Step 4: Now you have successfully activated horizontal menu By changing specific classes.
Step 5: You need to repeat the same process to activate the Hover Horizantal menu.
Note: canActivate: [AdminGuard] is used to restrict the user from entering to page who is not authenticated.

Steps to convert default-menu to boxed-menu

By default, You'll be getting default menu. If you want to convert into Boxed-menu then follow the below steps.

Step 1: Go to the src folder of your project, there you'll find index.html file open (src » index.html)

 <body class="" >

Step 2: Now add className boxed.

 <body class="layout-boxed" >

Step 3: Here layout-boxed class name contains a boxed menu.
Step 4: Now you have successfully activated Boxed menu.
Step 5: You need to repeat the same process to activate the default menu.

Steps to convert fixed-layout to scrollable-layout

By default, You'll be getting fixed-layout. If you want to convert into scrollable-layout then follow the below steps.

Step 1: Go to the src folder of your project, there you'll find index.html file open (src » index.html)

 <body class="" >

Step 2: Now add className scrollable-layout.

 <body class="scrollable-layout" >

Step 3: Here scrollable-layout class name contains a scrollable-layout.
Step 4: Now you have successfully activated Scrollable layout.
Step 5: You need to repeat the same process to activate the fixed-layout.