@wolf_and_associates/navbar

WolfLTC Navbar

A navbar for use with Wolf & Associates projects. Works directly with @wolf_and_associates/popover to display complex navigation needs.

Requirements

This library must use the same Angular Compiler version as the project you are adding it to.

Usage

Import the NavbarModule in your project's app.module.ts:

import { NavbarModule } from '@wolf_and_associates/navbar';

@NgModule({
  // ...
  imports: [
    // ...
    NavbarModule
  ]
})

Inputs

Input	Type	Defaults	Required	Description
logo_url	string		true	The navbar image source URL
brand_title	string		false	The navbar brand title
show_logout	boolean	true	false	Show the logout button, when clicked emits onLogoutClick
items	PopoverMenuItem[]	[]	true	The items in the menu
show_brand_title_at_top	boolean	true	false	Should the brand title text be shown while at the top of the page

Events

Event	Parameters	Description
onLogoutClick	EventEmitter	The user clicked the logout button
onPopoverMenuClosed	EventEmitter<ComponentRef>	When the popover closes
onPopoverMenuOpen	EventEmitter<ComponentRef>	When the popover opens
onContentOutletClick	EventEmitter	The user clicked a content_outlet PopoverMenuItem
onIframeOutletClick	EventEmitter	The user clicked an iframe PopoverMenuItem
onIframeOutletOpen	EventEmitter	When the iframe popover opens
onIframeOutletClosed	EventEmitter	When the iframe popover closes

Properties

Property	Type	Defaults	Description
mobile_collapsed	boolean	true	Is the menu collapsed (mobile only)
iframe_popover_url	string		The URL that is used in the popover iframe
iframe_popover_close_btn	boolean	true	Should the iframe close button be visible
popovers	{ subscriptions: Subscription[]; component: ComponentRef }[]		All open popovers

Methods

Method	Parameters	Description
closeAllPopovers		Close all popovers
toggleMobileCollapse		Toggles the navbar menu for mobile
closeIframePopover		Close the open iFrame popover
closePopoverMenu		Close the most recently opened Popover
onIframeOutletClicked	event: PopoverMenuItem	Load an iframe popover. If using the wolfltc.com/calculators endpoint, the close button is disabled by default
onIframeClosed		The user closed the iframe popover
onIframeOpen		The user opened the iframe popover
go	item: PopoverMenuItem	Perform some PopoverMenuItem action

Usage

<wolfltc-navbar [logo_url]="'assets/images/LARGEW.svg'" [brand_title]="'WOLF &amp; ASSOCIATES'" [items]="auth.user.network?.navbar" [show_logout]="true" (onLogoutClick)="auth.logout()" (onContentOutletClick)="loadContentOutlet($event)"></wolfltc-navbar>

Development

This library requires the @wolf_and_associates/popover library.

ng build --project=popover --watch

# In another terminal...
cd projects/navbar
rm -rf package-lock.json node_modules/
npm i ../../dist/popover
cd ../../
ng build --project=navbar --watch

# In another terminal...
cd destination-project/
npm i ../wolfltc-ngx/dist/popover