Gene
  • Introduction
  • Folder Structure
  • Installation
  • Layouts
  • Translate App
  • Adding/Deleting Menu & Component
  • Adding Widgets in Component
  • Seed Project
  • Style Customization
  • RTL
  • Components
    • Chat
    • Calendar
    • Inbox
    • Editor
    • Material Icons
    • ng2 Chart
    • UI Component
    • Drag and Drop
    • Sortable js
    • Tables
      • Fullscreen
      • Selection
      • Pinning
      • Sorting
      • Paging
      • Editing
      • Filter
    • Forms
    • Maps
  • Deployment
  • Credits
  • Template Update
  • FAQ's (Frequently Asked Questions)
  • Changelog
  • Customer Support
    • Hire Us
Powered by GitBook
On this page
  • Default Layout
  • Mini Sidebar
  • Horizontal Menu
  • Dark Mode

Was this helpful?

Layouts

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

PreviousInstallationNextTranslate App

Last updated 6 years ago

Was this helpful?

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>
Default Layout
Mini Sidebar Layout
Horizontal Layout
Dark Mode