@smallpearl/ngx-mat-menu-layout v15.0.0

NgxMatMenuLayout

An Angular package for implementing a responsive side menu user interface with a toolbar. The package uses Angular Material 15+ and is compatible with Angular versions 15 and above.

The layout is responsive and hides the side menu when run on small screens. Toolbar displays an app title at the start. Toolbar content can be customized by content projection.

How to use

To use this component, initialize it with the branding logo & text, application title and menu items (NavItem[]).

    <ngx-mat-side-menu-layout
      brandingImage="assets/angular.png"
      brandingText="SMALLPEARL"
      appTitle="SUPERCRM"
      [menuItems]="menuItems"
      [menuPaneFooterContent]="versionInfoFooter"
      [toolbarTitleContent]="toolbarTitle"
    ></ngx-mat-side-menu-layout>
    <ng-template #versionInfoFooter>
      <div style="text-align: center; font-size: 0.8em;">
        <select name="language" id="language">
          <option value="en">English</option>
          <option value="zh">中文</option>
        </select>
        <br />
        <small>2.3.102</small>
      </div>
    </ng-template>
    <ng-template #toolbarEndContent>
      <button mat-icon-button (click)="onNotificationsToggle()">
        <mat-icon>notifications</mat-icon>
      </button>
      <button
        mat-icon-button
        class="user-button"
        [matMenuTriggerFor]="userProfileMenu"
      >
        <img src="assets/avatar.jpg" alt="" />
      </button>
      <mat-menu #userProfileMenu="matMenu">
        <button mat-menu-item (click)="onUpdateProfile()">
          <mat-icon>face</mat-icon>
          <span>Profile</span>
        </button>
        <button mat-menu-item (click)="onChangePassword()">
          <mat-icon>password</mat-icon>
          <span>Change password</span>
        </button>
        <button mat-menu-item (click)="onSignOut()">
          <mat-icon>logout</mat-icon>
          <span>Sign out</span>
        </button>
      </mat-menu>
    </ng-template>

Define the menu items as an array of NavItem objects and set it as the value for the property menuItems.

And voila, you will have a beautiful side menu layout with a toolbar on top. The layout is responsive and on small screens will auto hide. You can display the navigation menu, by using the hamburger button at the start of the toolbar.

See the sample application for implementation.

Reference

Inputs

CSS

The navigation menu theme can be customized by using CSS variables. There are a bunch of them that control the colors of different elements of the layout. The following table lists them and their purpose.

The sample project in the library, uses angular material theme to set values for these variables.

Info pane

The component supports an information pane on the end of the pag. But it's hidden by default and has to be explicitly shown. One way to do that would be to query the infoPane member of QQMatSideMenuLayoutComponent which is an instance of the MatSideNav component. You can toggle its visibility by calling its toggle() method. An approach could be to show a button at the end of the toolbar and then call infoPane.toggle() when the button is selected.

  export class AppHomeComponent implements OnInit {
    @ViewChild(QQMatSideMenuLayoutComponent)
    sideMenuLayout: QQMatSideMenuLayoutComponent;

    ngOnInit(): void {}

    ...
    onNotificationsToggle() {
      if (this.sideMenuLayout) {
        this.sideMenuLayout.infoPane.toggle();
      }
    }
    ...
  }

NavItem

This is the interface that is used to define the side menu items and pass it as the value for the menuItems property. It is defined as:-

export interface NavItem {
  text: string;
  icon: string;
  iconType?: 'mat' | 'bi' | 'fa';
  disabled?: boolean;
  route?: string;
  children?: NavItem[];
  backButton?: boolean;
  backHref?: string;
}

Members are described in the following table:

Dependencies

• Angular 15+
• Angular Material 15+