Layouts

Gene comes with three handcrafted layouts. Read the documentation carefully to use the following layouts in your template.

Default Layout

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

Mini Sidebar

To enable mini sidebar layout, go to src->app->service->core and open core.service.ts file and change the value of collapseSidebar to true.

core.service.ts
export class CoreService {
	...
	collapseSidebar : boolean = true;
	...
}

Horizontal Menu

To enable horizontal menu go to src->app->service->core and open core.service.ts file and change the value of horizontalStatus & horizontalSizeStatue to true.

core.service.ts
export class CoreService {
	...
	horizontalStatus : boolean = true;
	horizontalSizeStatue : boolean =  true;
	...
}

Dark Mode

To enable the dark mode in the template, go to src->app->main and open the main-material.html file, now search for the app-dark class at div <div id = "main-app" & change its value to true.

'app-dark': true,

Now open the src->index.html file & add the class "dark-theme-active" in the body tag. Like given below:

<body class="dark-theme-active">
...
</body>
PreviousInstallationNextTranslate App

Last updated