Feature/add semantic list structure to header navigation (#2044)

* Add semantic list structure (ul and li elements)

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added the investment streaks to the analysis page
 - Added support for a unit in the value component
+- Added a semantic list structure to the header navigation
 - Added a default value for the `includeHistoricalData` attribute in the symbol data endpoint
 
 ## 1.276.0 - 2023-06-03

apps/client/src/app/components/header/header.component.html

@@ -8,18 +8,23 @@
       <gf-logo [label]="pageTitle"></gf-logo>
     </a>
     <span class="spacer"></span>
+    <ul class="alig-items-center d-flex list-inline m-0">
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block"
           i18n
           mat-flat-button
           [ngClass]="{
-        'font-weight-bold': currentRoute === 'home' || currentRoute === 'zen',
+            'font-weight-bold':
+              currentRoute === 'home' || currentRoute === 'zen',
             'text-decoration-underline':
               currentRoute === 'home' || currentRoute === 'zen'
           }"
           [routerLink]="['/']"
           >Overview</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -31,6 +36,8 @@
           [routerLink]="['/portfolio']"
           >Portfolio</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -42,8 +49,9 @@
           [routerLink]="['/accounts']"
           >Accounts</a
         >
+      </li>
+      <li *ngIf="hasPermissionToAccessAdminControl" class="list-inline-item">
         <a
-      *ngIf="hasPermissionToAccessAdminControl"
           class="d-none d-sm-block mx-1"
           i18n
           mat-flat-button
@@ -54,6 +62,8 @@
           [routerLink]="['/admin']"
           >Admin Control</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -65,10 +75,14 @@
           [routerLink]="['/resources']"
           >Resources</a
         >
-    <a
+      </li>
+      <li
         *ngIf="
           hasPermissionForSubscription && user?.subscription?.type === 'Basic'
         "
+        class="list-inline-item"
+      >
+        <a
           class="d-none d-sm-block mx-1"
           i18n
           mat-flat-button
@@ -79,6 +93,8 @@
           [routerLink]="['/pricing']"
           >Pricing</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -90,6 +106,8 @@
           [routerLink]="['/about']"
           >About</a
         >
+      </li>
+      <li class="list-inline-item">
         <button
           class="no-min-width px-1"
           mat-flat-button
@@ -146,7 +164,8 @@
             i18n
             mat-menu-item
             [ngClass]="{
-          'font-weight-bold': currentRoute === 'home' || currentRoute === 'zen'
+              'font-weight-bold':
+                currentRoute === 'home' || currentRoute === 'zen'
             }"
             [routerLink]="['/']"
             >Overview</a
@@ -198,7 +217,8 @@
           >
           <a
             *ngIf="
-          hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+              hasPermissionForSubscription &&
+              user?.subscription?.type === 'Basic'
             "
             class="d-flex d-sm-none"
             i18n
@@ -218,6 +238,8 @@
           <hr class="d-flex d-sm-none m-0" />
           <button mat-menu-item (click)="onSignOut()">Logout</button>
         </mat-menu>
+      </li>
+    </ul>
   </ng-container>
   <ng-container *ngIf="user === null">
     <a
@@ -231,6 +253,8 @@
       ></gf-logo>
     </a>
     <span class="spacer"></span>
+    <ul class="alig-items-center d-flex list-inline m-0">
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -242,6 +266,8 @@
           [routerLink]="['/features']"
           >Features</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
           class="d-none d-sm-block mx-1"
           i18n
@@ -253,8 +279,9 @@
           [routerLink]="['/about']"
           >About</a
         >
+      </li>
+      <li *ngIf="hasPermissionForSubscription" class="list-inline-item">
         <a
-      *ngIf="hasPermissionForSubscription"
           i18n
           mat-flat-button
           [ngClass]="{
@@ -264,8 +291,12 @@
           [routerLink]="['/pricing']"
           >Pricing</a
         >
-    <a
+      </li>
+      <li
         *ngIf="hasPermissionToAccessFearAndGreedIndex"
+        class="list-inline-item"
+      >
+        <a
           class="d-none d-sm-block mx-1"
           i18n
           mat-flat-button
@@ -276,22 +307,32 @@
           [routerLink]="['/markets']"
           >Markets</a
         >
+      </li>
+      <li class="list-inline-item">
         <a
-      class="d-none d-sm-block no-min-width"
+          class="d-none d-sm-block no-min-width p-1"
           href="https://github.com/ghostfolio/ghostfolio"
-      mat-icon-button
+          mat-flat-button
           ><ion-icon name="logo-github"></ion-icon
         ></a>
+      </li>
+      <li class="list-inline-item">
         <button class="mx-1" mat-flat-button (click)="openLoginDialog()">
           <ng-container i18n>Sign in</ng-container>
         </button>
-    <a
+      </li>
+      <li
         *ngIf="currentRoute !== 'register' && hasPermissionToCreateUser"
+        class="list-inline-item"
+      >
+        <a
           class="d-none d-sm-block"
           color="primary"
           mat-flat-button
           [routerLink]="['/register']"
           ><ng-container i18n>Get started</ng-container>
         </a>
+      </li>
+    </ul>
   </ng-container>
 </mat-toolbar>