open-index/open-npm huggingface dataset:
npm package: @iodp/geodesc-navbar
Description: GEODESC Navbar provides a common navbar UI element shared by GEODESC apps. The navbar element contains a `<ng-content>` element which is used to display other app content, likely through providing it with a `<router-outlet>`. The ng-content element occupi
Author: menzelr
Latest version: 0.0.51

GEODESC Navbar provides a common navbar UI element shared by GEODESC apps. The navbar element contains a `<ng-content>` element which is used to display other app content, likely through providing it with a `<router-outlet>`. The ng-content element occupies all space not used by the navbar.  

To use this component complete the following steps:  

1. Install the package.  
&nbsp;&nbsp;&nbsp;&nbsp;npm install @iodp/geodesc-navbar  

2. Import GeodescNavbarModule into your app's Core module.  
&nbsp;&nbsp;&nbsp;&nbsp;import { GeodescNavbarModule } from '@iodp/geodesc-navbar';  
&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;imports: [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GeodescNavbarModule  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;],  
&nbsp;&nbsp;&nbsp;&nbsp;...  

3. Use your app's Core component to render the element:  
&nbsp;&nbsp;&nbsp;&nbsp;...  
&nbsp;&nbsp;&nbsp;&nbsp;template: '`<geodesc-navbar><router-outlet></router-outlet></geodesc-navbar>`',  
&nbsp;&nbsp;&nbsp;&nbsp;...  

4. Include something like the following in your app's startup service:  
&nbsp;&nbsp;&nbsp;&nbsp;private _navbarLinks:NavbarLink[] = [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon: 'open_in_new',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: 'GEODESCAdmin',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: 'some_link'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;icon: 'open_in_new',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text: 'CatalogManager',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:  'some_link'  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;]  

&nbsp;&nbsp;&nbsp;&nbsp;private _navbarParams:NavbarParams = {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: 'GEODESC DataCapture',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logoPath: 'some_path',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;links: this._navbarLinks  
&nbsp;&nbsp;&nbsp;&nbsp;}  

&nbsp;&nbsp;&nbsp;&nbsp;constructor(private navbar:GeodescNavbarService) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.navbar.setNavbarParams(this._navbarParams);  
&nbsp;&nbsp;&nbsp;&nbsp;}