trying to complete nav bar (side bar)

.vscode/settings.json

+{
+    "python.pythonPath": "/home/nestorid/.pyenv/versions/reqman/bin/python"
+}
\ No newline at end of file

reqtool/ReqmanAngular11/angular.json

@@ -31,6 +31,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
             "scripts": []
@@ -94,6 +95,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
             "scripts": []

reqtool/ReqmanAngular11/package-lock.json

@@ -157,6 +157,23 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/cdk": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.0.tgz",
+      "integrity": "sha512-25k1giKAJ7DPzJBZfAVZmw/VfR4pZUaZnhgVAMwIdGPl5SaXJEW3e2znGlhzwkuQsiBgrSKfMgJmwKSyUbe2tg==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "11.1.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.1.4.tgz",
@@ -328,6 +345,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/forms": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-11.1.2.tgz",
@@ -458,6 +483,14 @@
         }
       }
     },
+    "@angular/material": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.0.tgz",
+      "integrity": "sha512-duTQdHtzdZ3KWn90JcN+eI0oNwr7E7JGEOp7tZ9XOtqty0h158SJUCYSuDxhFOqyAgaY41enNPHdB2c4Xz0iBQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.1.2.tgz",

reqtool/ReqmanAngular11/package.json

@@ -12,11 +12,14 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.1.2",
+    "@angular/cdk": "^11.2.0",
     "@angular/common": "~11.1.2",
     "@angular/compiler": "~11.1.2",
     "@angular/core": "~11.1.2",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~11.1.2",
     "@angular/localize": "~11.1.2",
+    "@angular/material": "^11.2.0",
     "@angular/platform-browser": "~11.1.2",
     "@angular/platform-browser-dynamic": "~11.1.2",
     "@angular/router": "~11.1.2",

reqtool/ReqmanAngular11/src/app/app.module.ts

@@ -19,7 +19,11 @@ import { AddPrefixComponent } from './components/add-prefix/add-prefix.component
 import { PrefixDetailsComponent } from './components/prefix-details/prefix-details.component';
 import { PrefixListComponent } from './components/prefix-list/prefix-list.component';
 import { NotifierModule } from "angular-notifier";
+import { NavigationBarComponent } from './components/navigation-bar/navigation-bar.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+ import {MaterialModule} from './mat-module';
+import { NavComponent } from './components/nav/nav.component';
 
 
 
@@ -34,6 +38,8 @@ import { NotifierModule } from "angular-notifier";
     AddPrefixComponent,
     PrefixDetailsComponent,
     PrefixListComponent,
+    NavigationBarComponent,
+    NavComponent,
   ],
   imports: [
     BrowserModule,
@@ -42,6 +48,8 @@ import { NotifierModule } from "angular-notifier";
     HttpClientModule,
     NgbModule,
     NotifierModule,
+    BrowserAnimationsModule,
+    MaterialModule,
   ],
   providers: [
     AuthService,

reqtool/ReqmanAngular11/src/app/components/nav/nav.component.html

+<app-navigation-bar></app-navigation-bar>
+
+<mat-sidenav-container autosize>
+
+  <mat-sidenav #navigationSidenav mode="over" role="navigation">
+
+    <mat-toolbar>
+      <mat-toolbar-row>
+        <h2 class="toolbar-title"> APP </h2>
+      </mat-toolbar-row>
+    </mat-toolbar>
+
+    <!-- <mat-nav-list dense> -->
+    <mat-nav-list>
+
+
+
+        <h2 matSubheader> WORK </h2>
+
+        <a mat-list-item routerLink="/" style="height: 0;"></a>
+
+        <!-- <mat-divider></mat-divider> -->
+
+
+
+        <h2 matSubheader> CUSTOMER </h2>
+
+
+
+
+
+      <!--
+
+      <ng-container *ngIf="salesRoutes">
+
+        <h2 matSubheader> {{ 'SALES_SUB_HEADER' | translate }} </h2>
+
+        <a *ngFor="let item of salesRoutes"
+           mat-list-item
+           (click)="navigationSidenav.close()"
+           [routerLink]="[item.route]"
+           routerLinkActive="list-item-active">
+          <mat-icon matListIcon class="nav-list-icon"> {{ item.icon }} </mat-icon>
+          {{item.title}}
+        </a>
+
+      </ng-container>
+
+      <ng-container *ngIf="collateralRoutes">
+
+        <h2 matSubheader> {{ 'COLLATERAL_SUB_HEADER' | translate }} </h2>
+
+        <a *ngFor="let item of collateralRoutes"
+           mat-list-item
+           (click)="navigationSidenav.close()"
+           [routerLink]="[item.route]"
+           routerLinkActive="list-item-active">
+          <mat-icon matListIcon class="nav-list-icon"> {{ item.icon }} </mat-icon>
+          {{item.title}}
+        </a>
+
+      </ng-container>
+
+      -->
+
+      <h2 matSubheader> SALES</h2>
+      <h2 matSubheader> COL </h2>
+      <h2 matSubheader> MARKETING</h2>
+
+
+    </mat-nav-list>
+
+  </mat-sidenav>
+
+  <mat-sidenav #commandbarSidenav position="end" mode="side" class="crm-command-bar-sidenav">
+
+    <mat-list style="padding: 10px;">
+
+
+    </mat-list>
+
+  </mat-sidenav>
+
+  <mat-sidenav-content role="main">
+    <!--
+    <crm-navigation-bar *ngIf="isAuthenticated()" (toggleSidenav)="navigationSidenav.toggle()">
+    </crm-navigation-bar>
+    -->
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+
+</mat-sidenav-container>

reqtool/ReqmanAngular11/src/app/components/nav/nav.component.scss

+@mixin crm-nav-theme($theme) {
+
+    $nav-list-icon-padding: 12px !default;
+    $toolbar-title-padding: 16px !default;
+  
+    .list-item-active {
+      font-weight: bold;
+      color: mat-color(map-get($theme, accent), darker) !important;
+      background: rgba(0, 0, 0, 0.04);
+    }
+  
+    .nav-list-icon {
+      margin: 0 $nav-list-icon-padding 0 $nav-list-icon-padding;
+    }
+  
+    .toolbar-title {
+      margin: 0 $toolbar-title-padding 0 $toolbar-title-padding;
+    }
+  
+  }
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/nav/nav.component.spec.ts

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

reqtool/ReqmanAngular11/src/app/components/nav/nav.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AuthService } from './../../services/auth.service';
+
+
+@Component({
+  selector: 'app-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.scss']
+})
+export class NavComponent implements OnInit {
+
+  constructor(private authService: AuthService,) { }
+
+  ngOnInit(): void {
+  }
+
+  public isAuthenticated() {
+
+    this.authService.isLoggedIn();
+  }
+}

reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.html

+<mat-toolbar color="primary" class="app-navigation-bar">
+
+    <mat-toolbar-row>
+
+  
+      <span class="toolbar-title"> {{ 'APP_TOOLBAR_TITLE'}} </span>
+  
+      <div fxFlex fxLayout fxLayoutAlign="flex-end">
+  
+        <ul fxLayout fxLayoutGap="20px" class="navigation-items">
+  
+          <li fxHide.xs>
+            <button mat-icon-button>
+              <mat-icon> settings </mat-icon>
+            </button>
+          </li>
+  
+          <li fxHide.xs>
+            <button mat-icon-button>
+              <mat-icon> help_outline </mat-icon>
+            </button>
+          </li>
+  
+          <li>
+            <button mat-icon-button [matMenuTriggerFor]="auth">
+              <mat-icon> person </mat-icon>
+            </button>
+            <mat-menu #auth="matMenu">
+  
+              <mat-divider></mat-divider>
+  
+              <button mat-menu-item (click)="logout()">
+                <mat-icon> exit_to_app </mat-icon>
+                <span> {{ 'SIGN_OUT_NAVIGATION_BAR_BUTTON' }} </span>
+              </button>
+  
+            </mat-menu>
+          </li>
+  
+        </ul>
+  
+      </div>
+  
+    </mat-toolbar-row>
+  
+  </mat-toolbar>
+<div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
+    <div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
+      <mat-icon class="toolbar-icon">settings</mat-icon>
+      <mat-icon class="toolbar-icon">help_outline</mat-icon>
+      <button mat-icon-button [matMenuTriggerFor]="auth">
+        <mat-icon>person_outline</mat-icon>
+      </button>
+      <mat-menu #auth="matMenu">
+        <button mat-menu-item>
+          <mat-icon>exit_to_app</mat-icon>
+          <span>Sign out</span>
+        </button>
+      </mat-menu>
+    </div>
+<button mat-icon-button [matMenuTriggerFor]="menu">
+  <mat-icon>more_vert</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  <button mat-menu-item>
+    <mat-icon>dialpad</mat-icon>
+    <span>Redial</span>
+  </button>
+  <button mat-menu-item disabled>
+    <mat-icon>voicemail</mat-icon>
+    <span>Check voicemail</span>
+  </button>
+  <button mat-menu-item>
+    <mat-icon>notifications_off</mat-icon>
+    <span>Disable alerts</span>
+  </button>
+</mat-menu>
+    <div fxFlex fxLayout fxLayoutAlign="flex-end" fxHide.xs>
+      <ul fxLayout fxLayoutGap="20px" class="navigation-items">
+        <li>
+          <a>
+            <mat-icon class="toolbar-icon">settings</mat-icon>
+          </a>
+        </li>
+        <li>
+          <a >
+            <mat-icon class="toolbar-icon">help_outline</mat-icon>
+          </a>
+        </li>
+        <li>
+          <a>
+            <mat-icon class="toolbar-icon">person_outline</mat-icon>
+          </a>
+        </li>
+      </ul>
+    </div>
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.scss

+$toolbar-title-padding: 16px !default;
+
+.toolbar-title {
+  margin: 0 $toolbar-title-padding 0 $toolbar-title-padding;
+}
+
+.navigation-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+
+.app-navigation-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 998;
+}
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.spec.ts

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

reqtool/ReqmanAngular11/src/app/components/navigation-bar/navigation-bar.component.ts

+import { Component, EventEmitter, Output } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+
+import { AuthService } from './../../services/auth.service';
+
+
+@Component({
+  selector: 'app-navigation-bar',
+  templateUrl: './navigation-bar.component.html',
+  styleUrls: ['./navigation-bar.component.scss']
+})
+export class NavigationBarComponent {
+
+  @Output() toggleSidenav = new EventEmitter<void>();
+
+  private returnUrl = '/';
+
+  constructor(private authService: AuthService,
+              private router: Router) {
+
+    this.router.events.subscribe((event) => {
+
+      if (event instanceof NavigationEnd) {
+
+        this.returnUrl = event.url;
+      }
+
+    });
+
+  }
+
+  public onProfile() {
+
+    this.router.navigate(['users/profile']);
+  }
+  public logout() {
+
+    this.authService.logout();
+  }
+}

reqtool/ReqmanAngular11/src/app/mat-module.ts

+import { NgModule } from '@angular/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { PortalModule } from '@angular/cdk/portal';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkStepperModule } from '@angular/cdk/stepper';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CdkTreeModule } from '@angular/cdk/tree';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTreeModule } from '@angular/material/tree';
+
+@NgModule({
+  exports: [
+    A11yModule,
+    ClipboardModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule
+  ],
+  imports: [
+    A11yModule,
+    ClipboardModule,
+    CdkStepperModule,
+    CdkTableModule,
+    CdkTreeModule,
+    DragDropModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatTreeModule,
+    PortalModule,
+    ScrollingModule
+  ]
+})
+export class MaterialModule { }
\ No newline at end of file

reqtool/ReqmanAngular11/src/app/services/sidenav.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { SidenavService } from './sidenav.service';
+
+describe('SidenavService', () => {
+  let service: SidenavService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SidenavService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

reqtool/ReqmanAngular11/src/app/services/sidenav.service.ts

+import { Injectable } from '@angular/core';
+import { MatSidenav } from '@angular/material/sidenav';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SidenavService {
+
+  //private sidenav: MatSidenav;
+  private opened = false;
+
+  constructor(private sidenav: MatSidenav) {}
+
+  public setSidenav(sidenav: MatSidenav) {
+
+    this.sidenav = sidenav;
+  }
+
+  public open() {
+    this.opened = true;
+    return this.sidenav.open();
+  }
+
+  public close() {
+    this.opened = false;
+    return this.sidenav.close();
+  }
+
+  public toggle() {
+    this.opened = !this.opened;
+    return this.sidenav.toggle();
+  }
+
+  public isOpen(): boolean {
+    return this.opened;
+  }
+
+}

reqtool/ReqmanAngular11/src/index.html

@@ -6,8 +6,11 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

reqtool/ReqmanAngular11/src/styles.scss

@@ -7,3 +7,5 @@
 
 /* Import angular-notifier. */
 @import '~angular-notifier/styles';
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }