feat: dynamic icon

CodeURJC-DAW-2022-23 · Apr 7, 2023 · a502f1e · a502f1e
1 parent a257b12
commit a502f1e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 25 deletions.
diff --git a/front/src/app/shared/components/nav/nav.component.css b/front/src/app/shared/components/nav/nav.component.css
@@ -22,11 +22,6 @@ nav {
   border-bottom: 1px solid gray;
 }
 
-i {
-  color: white;
-  cursor: pointer;
-}
-
 .collapsing {
   transition: none !important;
 }

diff --git a/front/src/app/shared/components/nav/nav.component.html b/front/src/app/shared/components/nav/nav.component.html
@@ -5,16 +5,10 @@
         <a class="navbar-brand" [routerLink]="['/']" (click)="toggleOff()">
           <img src="assets/images/alistLogo.svg" alt="Alist logo" width="80" height="30">
         </a>
-        <a class="compassNavIcon" [routerLink]="['/explore']">
-          <i class="fa-compass fa-xl" [ngClass]="compassIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-        </a>
+        <app-icon iconName="compass" [glow]="compassIconGlow" [routerLink]="['/explore']"></app-icon>
         <app-search></app-search>
-        <a class="heartNavIcon" (click)="toggleHeartIcon()">
-          <i class="fa-heart fa-xl" [ngClass]="heartIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-        </a>
-        <a class="profileNavIcon" [routerLink]="['/profile']">
-          <i class="fa-user fa-xl" [ngClass]="profileIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-        </a>
+        <app-icon iconName="heart" [glow]="heartIconGlow" (click)="toggleHeartIcon()" [routerLink]="['/']"></app-icon>
+        <app-icon iconName="user" [glow]="profileIconGlow" [routerLink]="['/profile']"></app-icon>
       </div>
     </div>
 
@@ -25,15 +19,11 @@
         </a>
         <div class="collapse no-transition" id="collapseNav">
           <div class="icon-container d-flex justify-content-evenly align-items-center ps-2 pe-2 gap-3">
-            <a class="compassNavIcon" [routerLink]="['/explore']">
-              <i class="fa-compass fa-xl" [ngClass]="compassIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-            </a>
-            <a class="heartNavIcon" (click)="toggleHeartIcon()">
-              <i class="fa-heart fa-xl" [ngClass]="heartIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-            </a>
-            <a class="profileNavIcon" [routerLink]="['/profile']">
-              <i class="fa-user fa-xl" [ngClass]="profileIconGlow ? 'fa-solid' : 'fa-regular'"></i>
-            </a>
+            <app-icon iconName="compass" [glow]="compassIconGlow" [routerLink]="['/explore']"></app-icon>
+            <app-search></app-search>
+            <app-icon iconName="heart" [glow]="heartIconGlow" (click)="toggleHeartIcon()"
+              [routerLink]="['/']"></app-icon>
+            <app-icon iconName="user" [glow]="profileIconGlow" [routerLink]="['/profile']"></app-icon>
           </div>
         </div>
         <div class="pe-2">

diff --git a/front/src/app/shared/shared.module.ts b/front/src/app/shared/shared.module.ts
@@ -5,10 +5,11 @@ import { RouterModule } from '@angular/router';
 import { NavComponent } from './components/nav/nav.component';
 import { SearchComponent } from './components/search/search.component';
 import { ErrorComponent } from './pages/error/error.component';
+import { IconComponent } from './components/icon/icon.component';
 
 @NgModule({
-  declarations: [NavComponent, SearchComponent, ErrorComponent],
+  declarations: [NavComponent, SearchComponent, ErrorComponent, IconComponent],
   imports: [CommonModule, RouterModule],
-  exports: [NavComponent, ErrorComponent],
+  exports: [NavComponent, ErrorComponent, IconComponent],
 })
 export class SharedModule {}