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>