Dark-navbar NPM

Navbar

This library was generated with Angular CLI version 9.1.12.

This component includes a navigation bar with: 1) logo 2) paths 3) search field (pending) 4) notifications 5) account and logout button

Installation

npm install dark-navbar --save

Usage

Import the following modules to the AppModule. Include the okta config, refer to okta documentation
Import your AppRoutingModule or RouterModule.forRoot(/* Your Routes */)

import { NavbarModule } from 'dark-navbar';
import { OKTA_CONFIG, OktaAuthModule } from '@okta/okta-angular';
import { Routes, RouterModule } from '@angular/router';

const oktaConfig = {
  issuer: 'oktaUrl',
  redirectUri: `callbackUrl`,
  clientId:  'clientId',
  pkce: true
};


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DefaultDatePickerModule,
    NavbarModule,
    OktaAuthModule,
    RouterModule.forRoot([{ path: '', component: AppComponent}]),
  ],
  providers: [
    { provide: OKTA_CONFIG, useValue: oktaConfig },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the following to app.component.html

<lib-navbar [logoimg]="logoimg" [homepageLink]="homepageLink" [loading]="false" [menuItems]="menuItems" [notifications]="notifications" (notificationClick)="notificationClick($event)" (searchChange)="searchChange($event)"></lib-navbar>

logoimg: the url to the logo image to be shown on the left corner
homepageLink: the path to the page redirect to when click on the logo
loading: if true, loading progress bar display below the navbar

Add the following function in app.component.ts

notificationClick($event: Notification){
    // do something with the notification return
}
searchChange($event: FormGroup){
  // do something with the search form return
}

Add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to index.html for matIcon to display

Interface

interface ImenuItem {
  title: string;
  icon?: string;
  route: string;
  children?: ImenuItem[];
}

interface Notification {
  id: string;
  message: string;
  date: Date;
  read: boolean;
  link: string;
}