Move GitHub redirect link to sidebar

Author: sawankshrma

src/app/app.component.html

@@ -16,14 +16,6 @@
       <div class="tag-subtitle">{{ subtitle }}</div>
     </div>
     <div class="dummy"></div>
-    <a
-      target="_blank"
-      class="github-fork-ribbon"
-      href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
-      data-ribbon="Fork me on GitHub"
-      title="Fork me on GitHub"
-      >Fork me on GitHub</a
-    >
   </div>
   <mat-divider></mat-divider>
   <router-outlet></router-outlet>

src/app/app.component.spec.ts

@@ -22,12 +22,4 @@ describe('AppComponent', () => {
   it('should create the app', () => {
     expect(app).toBeTruthy();
   });
-
-  it('check for fork me on github ribbon generation', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const HTMLElement: HTMLElement = fixture.nativeElement;
-    var divTag = HTMLElement.querySelector('div')!;
-    var aTag = divTag.querySelector('a')!;
-    expect(aTag.textContent).toContain('GitHub');
-  });
 });

src/app/component/sidenav-buttons/sidenav-buttons.component.html

@@ -3,6 +3,10 @@
     <mat-icon mat-list-icon color="primary">{{ Icons[i] }}</mat-icon>
     <h3 mat-line>{{ Options[i] }}</h3>
   </a>
+  <a mat-list-item href="https://github.com/wurstbrot/DevSecOps-MaturityModel/" target="_blank">
+    <mat-icon mat-list-icon color="primary" svgIcon="github"></mat-icon>
+    <h3 mat-line>GitHub</h3>
+  </a>
 </mat-nav-list>
 
 <!-- Separate theme toggle outside nav-list -->

src/app/component/sidenav-buttons/sidenav-buttons.component.spec.ts

@@ -37,8 +37,7 @@ describe('SidenavButtonsComponent', () => {
     for (var x = 0; x < NavigationList.length; x += 1) {
       NavigationNamesBeingShown.push(NavigationList[x].textContent);
     }
-    //console.log({ ...NavigationNamesBeingShown });
-    //console.log(component.Options);
+    NavigationNamesBeingShown.pop(); // Remove GitHub link
     expect(NavigationNamesBeingShown).toEqual(component.Options);
   });
 

src/app/component/sidenav-buttons/sidenav-buttons.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GITHUB_SVG } from '../../../assets/svg_icons';
 import { ThemeService } from '../../service/theme.service';
 
 @Component({
@@ -43,7 +46,16 @@ export class SidenavButtonsComponent implements OnInit {
 
   isNightMode = false;
 
-  constructor(private themeService: ThemeService) {}
+  constructor(
+    private themeService: ThemeService,
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer
+  ) {
+    this.iconRegistry.addSvgIconLiteral(
+      'github',
+      this.sanitizer.bypassSecurityTrustHtml(GITHUB_SVG)
+    );
+  }
 
   ngOnInit(): void {
     const currentTheme = this.themeService.getTheme();

src/assets/svg_icons.ts

@@ -0,0 +1 @@
+export const GITHUB_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>`;