ngx-layout

A simple set of customizable components to construct a full page layout.

Demo

View the demo page here.

Install

Using npm:

npm install @niallconaghan/ngx-layout --save

Documentation

Reference the theme stylesheet in the styles array of the angular.json or the project.json if developing with NX.

"styles": [
    ...
    "node_modules/@niallconaghan/ngx-layout/src/theme/_variables.scss"
    ...
],

Import LayoutComponent, HeaderComponent, MainContentComponent and SideMenuComponent into your page component.

Components that you don't use do not have to be imported.

@Component({
  standalone: true,
  imports: [
    LayoutComponent,
    HeaderComponent,
    MainContentComponent,
    SideMenuComponent,
  ],
  selector: 'my-application',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

Or for non-standalone applications you can import the NgxLayoutModule.

@Component({
  standalone: true,
  imports: [
    NgxLayoutModule
  ],
  selector: 'my-application',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {}

Set the body of your html to 100% height and width.

/* styles.scss */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

The most simple usage is to use the components on the page template as follows.

<!-- app.component.html -->
<ngx-layout>
    <ngx-layout-header> Header </ngx-layout-header>
    <ngx-layout-side-menu> Sidemenu </ngx-layout-side-menu>
    <ngx-layout-main-content> Main content </ngx-layout-main-content>
</ngx-layout>

You can omit the header or sidemenu to achieve a header/content or sidemenu/content only layout.

Configuration

The layout components take optional configuration via inputs:

ngx-layout

Property	Type	Description	Default
sideMenuPosition	'start' | 'end'	places the sidemenu on the right or left side	'start'
fullscreenMenu	boolean	to display the side menu as full page height	'false'

ngx-header

Property	Type	Description	Default
height	number | 'auto'	the height of the header in pixels	'auto'
background	string	the background color of the header	undefined

ngx-side-menu

Property	Type	Description	Default
width	number | 'auto'	the width of the side menu in pixels	'auto'
background	string	the background color of the side menu	undefined

ngx-main-content

Property	Type	Description	Default
padding	string	the padding around the main content	undefined

Example

<ngx-layout sideMenuPosition="end" [fullscreenMenu]="true">
    <ngx-layout-header background="#0d47a1" [height]="55"> Header </ngx-layout-header>
    <ngx-layout-side-menu background="#e5e5e5" [width]="250"> Sidemenu </ngx-layout-side-menu>
    <ngx-layout-main-content padding="16px"> Main content </ngx-layout-main-content>
</ngx-layout>

If you perfer to configure the layout components via css you can override the theme variables.

ngx-layout {
  --ngx-layout-header__height: 55px;
  --ngx-layout-header__background-color: #0d47a1;
  --ngx-layout-side-menu__width: 250px;
  --ngx-layout-side-menu__background-color: #e5e5e5;
  --ngx-layout-main-content__background-color: transparent;
}

<ngx-layout sideMenuPosition="end" [fullscreenMenu]="true">
    <ngx-layout-header> Header </ngx-layout-header>
    <ngx-layout-side-menu> Sidemenu </ngx-layout-side-menu>
    <ngx-layout-main-content padding="16px"> Main content </ngx-layout-main-content>
</ngx-layout>