Zanex - 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. If you want to convert into horizontal-menu then follow the below steps.

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: FullLayoutComponent, children: Full_Content_Routes },
  // { path: '', component: HoriFullLayoutComponent, children: Full_Content_Routes },
];

Step 2: Now comment the FullLayoutComponent and uncomment the HoriFullLayoutComponent as shown below.

const routes: Routes = [
  // { path: '', component: FullLayoutComponent, children: Full_Content_Routes },
  { path: '', component: HoriFullLayoutComponent, children: Full_Content_Routes },
];

Step 3: Here FullLayoutComponent contains a vertical menu and HoriFullLayoutComponent contains a horizontal-menu.
Step 4: Now you have successfully activated horizontal menu.
Step 5: You need to repeat the same process to activate the default vertical menu.

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 layout-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 with the help of fixed-layout className.