@ifwis/ifwis-nav

IFWIS Navigation

View demo here.

This library provides top and side navbars for IFWIS applications build using Bootstrap and Angular. It integrates with the OAuth user data object received from the IFWIS STS Server.

Quickstart

The aim of this library is to provide a consistent look and feel to all IFWIS applications, which means that it has peer dependencies that you will need to install:

npm install bootstrap @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome typeface-poppins -s

Then install the main library:

npm install @ifwis/ifwis/nav -s

Import IfwisNavModule as you would any other Angular module. Usage is simple:

<ifwis-nav [userData]="userData" (change)="handleNavAction($event)">
  <div class="nav-title">
    My App
  </div>

  <ul class="topnav-links navbar-nav mr-auto">
    <li class="nav-item active d-none d-md-block">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item d-none d-md-block">
      <a class="nav-link" href="#">Example Link #1</a>
    </li>
    <li class="nav-item d-none d-md-block">
      <a class="nav-link" href="#">Example Link #2</a>
    </li>
  </ul>

  <ul class="sidenav-links nav flex-column pt-2">
    <li class="nav-header">Navigation</li>
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
  </ul>
</ifwis-nav>

This library does not handle OAuth authentication internally. You must configure your client and and pass the userData object, which the ilbrary will use to determine the login state.

You can bind to the (change) event and write a handler to determine what happens when the user clicks the sign in and sign out buttons. The event also emits when the sidenav is open, closed, and toggled.