@gwgi/layout v0.0.11

@gwgi/layout

A material layout component for Angular web applications.

Why

The library is intended to provide a drop-in component to the root component, to enable the developer to start developing features straight away, without worrying about app layout and navigation.

See it in action: Layout Demo

Features

1. Top toolbar, can be switched on and off. When switched off, top menu will be disabled and right dropdown menu will be moved to side navigation panel.
2. Side navigation, top menu navigations and right dropdown menu: render from array of nav data objects. Disabled if nav data objects are not provided.
3. Breadcrumbs, render breadcrumbs from reading route status automatically.

Usage

1. Use gwg-layout all-in-one component: Demo project: stackbliz

2. Structure your layout with components and directives provided in this library:

<gwgi-layout-container>
    <ng-container *ngIf="toolbarEnabled">
      <mat-toolbar color="primary" style="height: 50px">
        <button mat-icon-button gwgiToggleSideNav>
          <mat-icon>menu</mat-icon>
        </button>
        <a class="nav-link" routerLink="/" gwgiAppTitle>
        {{ appTitle }}</a>
        <gwgi-top-nav-menu [position]="'left'" [topNavItems]="topNavItems"></gwgi-top-nav-menu>
        <span gwgiSpacer></span>
        <gwgi-top-nav-menu [position]="'right'" [topNavItems]="topNavItems"></gwgi-top-nav-menu>
        <gwgi-right-menu [rightMenuItems]="rightMenuItems" [user]="user" (logout)="logout.emit()"></gwgi-right-menu>
      </mat-toolbar>
    </ng-container>
    <ng-container *ngIf="!toolbarEnabled">
      <button mat-mini-fab color="default" gwgiSidenavToggleButton [top]="'20px'" gwgiToggleSideNav>
        <mat-icon>menu</mat-icon>
      </button>
    </ng-container>
    <mat-sidenav-container>
      <mat-sidenav gwgiSidenavConfig>
        <mat-nav-list>
          <gwgi-nav-menu [sideNavItems]="sideNavItems">
            <ng-container *ngIf="!toolbarEnabled">
              <div fxLayout="column" fxLayoutAlign="center center">
                <h4>{{ appTitle }}</h4>
                <gwgi-right-menu [rightMenuItems]="rightMenuItems" [user]="user"
                                 (logout)="logout.emit()"></gwgi-right-menu>
              </div>
            </ng-container>
          </gwgi-nav-menu>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <gwgi-breadcrumb></gwgi-breadcrumb>
        <ng-content></ng-content>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </gwgi-layout-container>

Dependencies:

1. load material icons.
2. add the following packages to package.json:

{
  "dependencies": {
    "@angular/common": "^7.0.1",
    "@angular/compiler": "^7.0.1",
    "@angular/core": "^7.0.1",
    "@angular/forms": "^7.0.1",
    "@angular/platform-browser": "^7.0.1",
    "@angular/platform-browser-dynamic": "^7.0.1",
    "@angular/router": "^7.0.1",
    "@angular/cdk": "~7.1.1",
    "@angular/animations": "^7.1.3",
    "core-js": "^2.5.7",
    "rxjs": "^6.3.3",
    "zone.js": "^0.8.26",
    "@gwgi/layout": "latest",
    "@angular/material": "^7.1.1",
    "@ngrx/store": "6.1.2",
    "change-case": "^3.0.2"
  }
}

Exported Interfaces

• UserDetail

export interface UserDetail {
  /**
   * user's email
   */
  email?: string;
  /**
   * user's title such as 'Mr', 'Mrs', 'Mrs' etc.
   */
  title?: string;
  /**
   * user's first name
   */
  firstName?: string;
  /**
   * user's surname
   */
  surname?: string;
  /**
   * user's roles
   */
  roles?: string;
}

• NavItem

export interface NavItem {
  /**
   * Route url
   */
  url?: string;
  /**
   * Set true if the nav item has children Nav items and is a menu button
   */
  isMenu?: boolean;
  /**
   * name of the item to be shown in the side navigation
   */
  name?: string;
  /**
   * Tooltip for the nav item.
   */
  tooltip?: string;
  /**
   * Nav item will be hidden if hidden property is true
   */
  hidden?: boolean;
  /**
   * children nav items
   */
  children?: NavItem[];
  /**
   * when set to true, nav item will be hidden if user is set.
   */
  requireAuthorised?: boolean;
  /**
   * Roles required for the nav item
   * 1. divide roles by ',', for example: 'admin, super'
   * 2. nav item will only show when user's roles property has required roles specified in this property.
   */
  roles?: string;
}

• RightMenuItem

export interface RightMenuItem {
  /**
   * Name to be displayed in right menu.
   */
  name: string;
  /**
   * Route url
   */
  url: string;
  /**
   * Item will hidden if set to true
   */
  hidden?: boolean;
  /**
   * when set to true, item will be hidden if user is not specified
   */
  requireAuthorised?: boolean;
  /**
   * Roles required for the item
   * 1. divide roles by ',', for example: 'admin, super'
   * 2. item will only show when user's roles property has required roles specified in this property.
   */
  roles?: string;
}

• TopNavItem

export interface TopNavItem {
  /**
   * name to be shown in top navigation menu
   */
  name?: string;
  /**
   * Route url
   */
  url?: string;
  /**
   * Item will hidden if set to true
   */
  hidden?: boolean;
  /**
   * when set to true, item will be hidden if user is not specified
   */
  requireAuthorised?: boolean;
  /**
   * Roles required for the item
   * 1. divide roles by ',', for example: 'admin, super'
   * 2. item will only show when user's roles property has required roles specified in this property.
   */
  roles?: string;
  /**
   * position of the nav item
   * 1. left: left of the top toolbar, after app title
   * 2. right: right of the top toolbar, before right dropdown menu
   */
  position: 'right' | 'left';
}