Better Items Creation

src/app/header/header-dropdown/header-dropdown.component.css

@@ -30,7 +30,7 @@
     align-items: center;
     margin: 0;
     font-size: 20px;
-    font-weight: 400;
+    font-weight: 500;
     color: #555555;
 }
 

src/app/header/header-dropdown/header-dropdown.component.html

@@ -15,43 +15,21 @@
     </div>
     <div #management>
         <ul class="user-management" *ngIf="!this.user">
-            <li class="dropdown-item" (click)="onLoginOptionClicked()">
+            <li *ngFor="let option of mainOptions"
+                class="dropdown-item" (click)=option.callback()>
                 <div class="icon-box">
-                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                    <fa-icon [icon]="option.icon"></fa-icon>
                 </div>
-                <p>Login</p>
+                <p>{{option.text}}</p>
-            </li>
-            <li class="dropdown-item" (click)="onSignUpOptionClick()">
-                <div class="icon-box">
-                    <fa-icon class="fas fa-edit" [icon]="editIcon"></fa-icon>
-                </div>
-                <p>Sign up</p>
             </li>
         </ul>
         <ul class="user-management" *ngIf="this.user">
-            <li class="dropdown-item" (click)="onMyProfileClicked()">
+            <li *ngFor="let option of userOptions"
+                class="dropdown-item" (click)=option.callback()>
                 <div class="icon-box">
-                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                    <fa-icon [icon]="option.icon"></fa-icon>
                 </div>
-                <p>My Profile</p>
+                <p>{{option.text}}</p>
-            </li>
-            <li class="dropdown-item" (click)="onHelpClicked()">
-                <div class="icon-box">
-                    <fa-icon
-                        class="fas fa-question-circle"
-                        [icon]="questionCircleIcon"
-                    ></fa-icon>
-                </div>
-                <p>Help</p>
-            </li>
-            <li class="dropdown-item" (click)="onLogout()">
-                <div class="icon-box">
-                    <fa-icon
-                        class="fas fa-sign-out-alt"
-                        [icon]="signOutAltIcon"
-                    ></fa-icon>
-                </div>
-                <p>Logout</p>
             </li>
         </ul>
     </div>

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import {
     faEdit,
-    faQuestionCircle,
+    faQuestionCircle, faSignIn,
     faSignOutAlt,
     faUser,
 } from '@fortawesome/free-solid-svg-icons';
@@ -27,6 +27,7 @@ import { User } from '../../shared/model/user/user.model';
 import UserChecker from '../../shared/model/user/user.checker';
 import { HelpComponent } from '../header-popup/help/help.component';
 import { MyProfileComponent } from '../header-popup/my-profile/my-profile.component';
+import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 @Component({
     selector: 'app-header-dropdown',
@@ -52,11 +53,41 @@ import { MyProfileComponent } from '../header-popup/my-profile/my-profile.compon
     ],
 })
 export class HeaderDropdownComponent implements OnInit, OnDestroy {
-    userIcon = faUser;
+    mainOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
+        {
+            text: 'Login',
+            icon: faUser,
+            callback: () => this.onLoginOptionClicked(),
+        },
+        {
+            text: 'Sign Up',
+            icon: faSignIn,
+            callback: () => this.onSignUpOptionClick(),
+        },
+        {
+            text: 'Help',
+            icon: faQuestionCircle,
+            callback: () => this.onHelpClicked(),
+        }
+    ];
 
-    editIcon = faEdit;
+    userOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
-
+        {
-    questionCircleIcon = faQuestionCircle;
+            text: 'My Profile',
+            icon: faUser,
+            callback: () => this.onMyProfileClicked(),
+        },
+        {
+            text: 'Help',
+            icon: faQuestionCircle,
+            callback: () => this.onHelpClicked(),
+        },
+        {
+            text: 'Logout',
+            icon: faSignOutAlt,
+            callback: () => this.onLogout(),
+        }
+    ];
 
     signOutAltIcon = faSignOutAlt;
 

src/app/header/header.component.css

@@ -13,6 +13,7 @@
     top: 0;
     left: 0;
     display: flex;
+    position: static;
     width: 100%;
     background-color: #2e2e2e;
     height: 10vh;
@@ -125,7 +126,7 @@ app-header-slider {
         letter-spacing: 3px;
         color: #ffffff;
         font-weight: 500;
-        font-size: 16px;
+        font-size: 20px;
     }
 
     .profile {