Layouts
Source Folder Structure
src/
├── app/
| ├── authentication
| ├── components
| ├── pages
| ├── shared/
├── ├── |-- layout components/
├── ├── ├── |-- content layout/
├── ├── ├── |-- custom layout/
├── ├── ├── |-- full layout/
| ├── app-routing.module.ts
| ├── app.component.html
| ├── app.component.scss
| ├── app.component.spec.ts
| ├── app.component.ts
| └── app.module.ts
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 app folder of your project, there you'll find switcher.component.html open (src\app\shared\components\switcher\switcher.component.html)
<html data-width="" >
Step 2: Now add AtteributeName boxed.
<html data-width="boxed" >
Step 3: Here data-width Attribute name contains a synto-width-mode.
Step 4: Now you have successfully activated synto-width-mode.
Step 5: You need to repeat the same process to activate the Full Width.
Steps to convert Fixed layout to scrollable layout
By default, You'll be getting default menu. If you want to convert into scrollable layout then follow the below steps.
- Step 1: Go to the app folder of your project, there you'll find switcher.component.html file open (src\app\shared\components\switcher\switcher.component.html)
<html data-menu-position="" >
Step 2: Now add AttributeName data-menu-position.
<html data-menu-position="scrollable" >
Step 3: Here scrollable Attribute Name contains a scrollable.
Step 4: Now you have successfully activated synto-menu-mode.
Step 5: You need to repeat the same process to activate the Fixed.