summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/shared/navbar
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/shared/navbar')
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts7
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.html23
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.less11
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts32
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts11
-rw-r--r--catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts16
6 files changed, 100 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
new file mode 100644
index 0000000000..d8a21e66c8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts
@@ -0,0 +1,7 @@
+import { MenuType, RouteInfo } from './navbar.metadata';
+
+export const ROUTES: RouteInfo[] = [
+ { path: 'page1', title: 'Logo', menuType: MenuType.BRAND },
+ { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT },
+ { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT }
+];
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
new file mode 100644
index 0000000000..d783be4c27
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html
@@ -0,0 +1,23 @@
+<nav class="navbar navbar-dark">
+ <div class="clearfix">
+ <button (click)="isCollapsed = !isCollapsed"
+ class="navbar-toggler pull-xs-right hidden-sm-up" type="button"
+ aria-controls="bd-main-nav"
+ aria-label="Toggle navigation">
+ {{menuIcon}}
+ </button>
+ <a (click)="isCollapsed = true" class="navbar-brand hidden-sm-up" [routerLink]="[brandMenu.path]">
+ {{brandMenu.title}}
+ </a>
+ </div>
+ <div class="navbar-toggleable-xs navbar-collapse" id="bd-main-nav" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
+ <ul class="nav navbar-nav">
+ <li (click)="isCollapsed = true" class="nav-item" routerLinkActive="active">
+ <a class="navbar-brand hidden-xs-down" [routerLink]="[brandMenu.path]">{{brandMenu.title}}</a>
+ </li>
+ <li (click)="isCollapsed = true" *ngFor="let menuItem of menuItems" class="nav-item" routerLinkActive="active" [ngClass]="getMenuItemClasses(menuItem)">
+ <a class="nav-item nav-link" [routerLink]="[menuItem.path]" routerLinkActive="active">{{menuItem.title}}</a>
+ </li>
+ </ul>
+ </div>
+</nav>
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
new file mode 100644
index 0000000000..3e5165b798
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less
@@ -0,0 +1,11 @@
+.active {
+ color: #ffffff;
+}
+.navbar-toggler {
+ border: solid 1px #cccccc;
+ color: #ff0000;
+}
+.navbar {
+ background-color: #0000ff;
+ border-radius: 0;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
new file mode 100644
index 0000000000..b174f9d18d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts
@@ -0,0 +1,32 @@
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import { ROUTES } from './navbar-routes.config';
+import { MenuType, RouteInfo } from './navbar.metadata';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: [ './navbar.component.less' ],
+ encapsulation: ViewEncapsulation.None
+})
+export class NavbarComponent implements OnInit {
+ public menuItems: Array<RouteInfo>;
+ public brandMenu: RouteInfo;
+ isCollapsed = true;
+
+ constructor() {}
+
+ ngOnInit() {
+ this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND);
+ this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0];
+ }
+
+ public get menuIcon(): string {
+ return this.isCollapsed ? '☰' : '✖';
+ }
+
+ public getMenuItemClasses(menuItem: any) {
+ return {
+ 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT
+ };
+ }
+}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
new file mode 100644
index 0000000000..245d0e6cfe
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts
@@ -0,0 +1,11 @@
+export enum MenuType {
+ BRAND,
+ LEFT,
+ RIGHT
+}
+
+export interface RouteInfo {
+ path: string;
+ title: string;
+ menuType: MenuType;
+}
diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
new file mode 100644
index 0000000000..18120a61fb
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NavbarComponent } from "./navbar.component";
+
+@NgModule({
+ imports: [
+ RouterModule,
+ CommonModule
+ ],
+ declarations: [ NavbarComponent ],
+ exports: [
+ NavbarComponent
+ ]
+})
+export class NavbarModule {}