Introduction

Psy-SideNav-Icon library is created to easily render sidenav cards that can be used to navigate to the main content inside an Angular application. This library was generated with Angular CLI version 10.0.14.

This library is recommened to be used with a layout generated via CSS-Grid.

Installation Instructions

Step 1: Install the library from npm

To install, run the following command in your angular project

npm i @psyora/psy-sidenav-Icon

Step 2: Import the library to Angular

To use the library in your application, import it to your angular application in your app or shared module.

import { PsySidenavIconModule } from 'psy-sidenav-icon';

@NgModule({
    imports: [
        ...,
        PsySidenavIconModule,
        ...
    ]
})

export class AppModule { }

Step 3: Use the library in the application using the selector

selector: psy-sidenav-icon

<div>
  <div>
    This is the content of the website
  </div>
  <div>
    <psy-sidenav-icon></psy-sidenav-icon>   
  </div>
</div>

The icons will not be rendered after this. Refer to the instructions from Quick Setup setup to see the preview of icons.

Usage instructions

The component psy-sidenav-icon can be used to create a single icon-card with

1. Icon
2. Title
3. Text

By default, only Icon and Title are visible.

When a user hovers over the card, the card expands and the card becomes visible.

On clicking a card, the user can be redirected to a url path. More details.

In order to generate more than one icons using the library, either have 2 selectors in the component or use *ngFor to create a loop.

API Reference

To generate a sidenav icon easily, the library exposes a ISideNavLink interface.

The definition of the interface is as follows:

export interface ISideNavLink {
  'matIcon': string,
  'title': string,
  'text': string,
  'path': string,
}

| # |Property | Description | Required | |:--:|--|--|:--:| | 1. | Mat Icon | The code of the material icon that needs to be rendered | Y | | 2. | Title | Title of the Card | Y | | 3. | Text | Additional information about card. Visible only when user hovers over the card | Y | | 4. | Path | A relative or absoute path, that the app should navigate to on clicking on card | Y |

Quick Setup

Use the following boiler-plate code in the application for a quick simulation of a working application:

Prerequisites:

• Angular Material Module needs to be installed and imported inside the app.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PsySidenavIconModule } from 'psy-sidenav-icon';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PsySidenavIconModule,

    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ISideNavLink } from 'psy-sidenav-icon';

@Component({
  selector: 'psy-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  sideNavLinks: ISideNavLink[] = [{
    'matIcon': 'home',
    'title': 'Home',
    'text': 'Return to home',
    'path': '/test'
  }, {
    'matIcon': 'edit',
    'title': 'Update',
    'text': 'Update object',
    'path': '/test'
  }, {
    'matIcon': 'schedule',
    'title': 'History',
    'text': 'Check logs',
    'path': '/test'
  }]
};

app.component.scss

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

.grid {
    display: grid;
    margin: 1em;
    height: 90vh;

    grid-template-columns: 70% 30%;
    grid-column-gap: 1em;

    &__sidenav {
        display: grid;
        grid-template-columns: repeat(2, minmax(50%, max-content));
        align-content: flex-start;
    }
}

app.component.html

<div class="grid">
  <div class="grid__content">
    This is the content of the website
  </div>
  <div class="grid__sidenav">
    <psy-sidenav-icon *ngFor="let sideNavLink of sideNavLinks" [sideNavLink]="sideNavLink"></psy-sidenav-icon>   
  </div>
</div>

On Success, you should see the SideNav's as follows: