feat: add missing Navbars example - thanks @EliasDerHai

Author: xidedix

src/app/_nav.ts

@@ -53,6 +53,12 @@ export const navItems: INavData[] = [
         url: '/base/forms',
         icon: 'icon-puzzle'
       },
+      {
+        name: 'Navbars',
+        url: '/base/navbars',
+        icon: 'icon-puzzle'
+
+      },
       {
         name: 'Pagination',
         url: '/base/paginations',

src/app/views/base/base-routing.module.ts

@@ -9,9 +9,10 @@ import { TabsComponent } from './tabs.component';
 import { CarouselsComponent } from './carousels.component';
 import { CollapsesComponent } from './collapses.component';
 import { PaginationsComponent } from './paginations.component';
-import {PopoversComponent} from './popovers.component';
-import {ProgressComponent} from './progress.component';
-import {TooltipsComponent} from './tooltips.component';
+import { PopoversComponent } from './popovers.component';
+import { ProgressComponent } from './progress.component';
+import { TooltipsComponent } from './tooltips.component';
+import { NavbarsComponent } from './navbars/navbars.component';
 
 const routes: Routes = [
   {
@@ -100,6 +101,13 @@ const routes: Routes = [
         data: {
           title: 'Tooltips'
         }
+      },
+      {
+        path: 'navbars',
+        component: NavbarsComponent,
+        data: {
+          title: 'Navbars'
+        }
       }
     ]
   }

src/app/views/base/base.module.ts

@@ -42,6 +42,8 @@ import { ProgressComponent } from './progress.component';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { TooltipsComponent } from './tooltips.component';
 
+// navbars
+import { NavbarsComponent } from './navbars/navbars.component';
 
 // Components Routing
 import { BaseRoutingModule } from './base-routing.module';
@@ -71,7 +73,8 @@ import { BaseRoutingModule } from './base-routing.module';
     PaginationsComponent,
     PopoversComponent,
     ProgressComponent,
-    TooltipsComponent
+    TooltipsComponent,
+    NavbarsComponent
   ]
 })
 export class BaseModule { }

src/app/views/base/navbars/navbars.component.css

@@ -0,0 +1,48 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col">
+      <div class="card">
+        <div class="card-header">
+          Bootstrap Navbar
+        </div>
+        <div class="card-body">
+          <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <a class="navbar-brand" href="#">Navbar</a>
+            <button aria-controls="navbarSupportedContent" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" class="navbar-toggler" type="button" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent" [collapse]="isCollapsed" [isAnimated]="true">
+              <ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item dropdown" dropdown>
+                  <a id="link-dropdown" class="nav-link dropdown-toggle" href dropdownToggle (click)="false" aria-controls="your-dropdown">
+                    Dropdown
+                  </a>
+                  <div id="your-dropdown" class="dropdown-menu" aria-labelledby="link-dropdown" *dropdownMenu>
+                    <a class="dropdown-item" href="#">Action</a>
+                    <a class="dropdown-item" href="#">Another action</a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">Something else here</a>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link disabled" href="#">Disabled</a>
+                </li>
+              </ul>
+              <form class="form-inline my-2 my-lg-0">
+                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+              </form>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/views/base/navbars/navbars.component.html

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarsComponent } from './navbars.component';
+
+describe('NavbarsComponent', () => {
+  let component: NavbarsComponent;
+  let fixture: ComponentFixture<NavbarsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/base/navbars/navbars.component.spec.ts

@@ -0,0 +1,38 @@
+import {AfterViewChecked, Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core';
+import {CollapseDirective} from 'ngx-bootstrap';
+
+@Component({
+  selector: 'app-navbars',
+  templateUrl: './navbars.component.html',
+  styleUrls: ['./navbars.component.css']
+})
+export class NavbarsComponent implements OnInit, AfterViewChecked {
+
+  private _isCollapsed: boolean = true;
+  set isCollapsed(value) {
+    this._isCollapsed = value;
+  }
+  get isCollapsed() {
+    if (this.collapseRef) {
+      // temp fix for "overflow: hidden"
+      if (getComputedStyle(this.collapseRef.nativeElement).getPropertyValue('display') === 'flex') {
+       this.renderer.removeStyle(this.collapseRef.nativeElement, 'overflow');
+      }
+    }
+    return this._isCollapsed;
+  }
+
+  @ViewChild(CollapseDirective, { read: ElementRef, static: false }) collapse !: CollapseDirective;
+
+  collapseRef;
+
+  constructor(
+    private renderer: Renderer2,
+  ) { }
+
+  ngOnInit() {}
+
+  ngAfterViewChecked (): void {
+    this.collapseRef = this.collapse;
+  }
+}