chore(app): refactor header to 'GitHub' navigation to use ng-template for improved reusability

Author: Ismaestro

src/app/shared/components/header/header.component.html

@@ -29,6 +29,27 @@
       </div>
     </ng-template>
 
+    <ng-template #githubNavItem>
+      <!-- GITHUB -->
+      <div class="nav__item">
+        <a
+          class="nav__link"
+          href="https://github.com/Ismaestro/angular-example-app"
+          target="_blank"
+        >
+          <img
+            class="github-logo__image"
+            ngSrc="angularexampleapp/assets/icons/github-mark-white_nkewl9.png"
+            alt="github logo"
+            i18n-alt
+            height="32"
+            width="32"
+            priority
+          />
+        </a>
+      </div>
+    </ng-template>
+
     <!-- HOME -->
     <div class="nav__item">
       <a
@@ -72,24 +93,7 @@
         </a>
       </div>
 
-      <!-- GITHUB -->
-      <div class="nav__item">
-        <a
-          class="nav__link"
-          href="https://github.com/Ismaestro/angular-example-app"
-          target="_blank"
-        >
-          <img
-            class="github-logo__image"
-            ngSrc="angularexampleapp/assets/icons/github-mark-white_nkewl9.png"
-            alt="github logo"
-            i18n-alt
-            height="32"
-            width="32"
-            priority
-          />
-        </a>
-      </div>
+      <ng-container [ngTemplateOutlet]="githubNavItem" />
 
       <div class="nav__item">
         <app-language-selector />
@@ -113,6 +117,8 @@
         </a>
       </div>
 
+      <ng-container [ngTemplateOutlet]="githubNavItem" />
+
       <!-- SEARCH -->
       <div class="nav__item">
         <app-pokemon-search-input />