Feature/extend footer by navigation (#2020)

* Extend footer

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Extended the footer by a navigation
 - Extended the testimonial section on the landing page
 - Added localized meta descriptions
 - Added support for localized routes in Spanish (`es`)

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

@@ -44,19 +44,106 @@
 </main>
 
 <footer
-  *ngIf="currentRoute === 'start'"
-  class="footer d-flex justify-content-center w-100"
+  *ngIf="
+    (currentRoute === 'blog' ||
+      currentRoute === 'features' ||
+      currentRoute === 'markets' ||
+      currentRoute === 'pricing' ||
+      currentRoute === 'resources' ||
+      currentRoute === 'register' ||
+      currentRoute === 'start') &&
+    deviceType !== 'mobile'
+  "
+  class="d-flex justify-content-center py-4 w-100"
 >
-  <div class="container text-center">
-    <div>
+  <div class="container">
+    <div class="mb-3 row">
+      <div class="col-sm">
+        <a [routerLink]="['/']"><gf-logo /></a>
+      </div>
+      <div class="col-sm">
+        <div class="h6 mt-2" i18n>Personal Finance</div>
+        <ul class="list-unstyled">
+          <li><a i18n [routerLink]="['/markets']">Markets</a></li>
+          <li><a i18n [routerLink]="['/resources']">Resources</a></li>
+        </ul>
+      </div>
+      <div class="col-sm">
+        <div class="h6 mt-2">Ghostfolio</div>
+        <ul class="list-unstyled">
+          <li><a i18n [routerLink]="['/about']">About</a></li>
+          <li *ngIf="hasPermissionForBlog">
+            <a i18n [routerLink]="['/blog']">Blog</a>
+          </li>
+          <li>
+            <a i18n [routerLink]="['/about', 'changelog']"
+              >Changelog & License</a
+            >
+          </li>
+          <li><a i18n [routerLink]="['/features']">Features</a></li>
+          <li *ngIf="hasPermissionForSubscription">
+            <a i18n [routerLink]="['/faq']">Frequently Asked Questions (FAQ)</a>
+          </li>
+          <li *ngIf="hasPermissionForSubscription">
+            <a [routerLink]="['/open']">Open Startup</a>
+          </li>
+          <li *ngIf="hasPermissionForSubscription">
+            <a i18n [routerLink]="['/pricing']">Pricing</a>
+          </li>
+          <li *ngIf="hasPermissionForSubscription">
+            <a i18n [routerLink]="['/about', 'privacy-policy']"
+              >Privacy Policy</a
+            >
+          </li>
+          <li *ngIf="hasPermissionForSubscription">
+            <a href="https://status.ghostfol.io" title="Ghostfolio Status"
+              >Status</a
+            >
+          </li>
+        </ul>
+      </div>
+      <div class="col-sm">
+        <div class="h6 mt-2" i18n>Community</div>
+        <ul class="list-unstyled">
+          <li>
+            <a
+              href="https://github.com/ghostfolio/ghostfolio"
+              title="Find Ghostfolio on GitHub"
+              >GitHub</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://ghostfolio.slack.com"
+              title="Join the Ghostfolio Slack channel"
+              >Slack</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://twitter.com/ghostfolio_"
+              title="Follow Ghostfolio on Twitter"
+              >Twitter</a
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="row text-center">
+      <div class="col">
         © 2021 - {{ currentYear }} <a href="https://ghostfol.io">Ghostfolio</a>
         {{ version }}
       </div>
-    <div class="py-2 text-muted">
+    </div>
+
+    <div class="row text-center text-muted">
+      <div class="col">
         <small i18n
-        >The risk of loss in trading can be substantial. It is not advisable to
-        invest money you may need in the short term.</small
+          >The risk of loss in trading can be substantial. It is not advisable
+          to invest money you may need in the short term.</small
         >
       </div>
     </div>
+  </div>
 </footer>

apps/client/src/app/app.component.scss

@@ -4,6 +4,11 @@
   display: block;
   min-height: 100vh;
 
+  footer {
+    background-color: rgba(var(--palette-foreground-text), 0.05);
+    font-size: 90%;
+  }
+
   main {
     min-height: 100vh;
     padding-top: 5rem;
@@ -25,14 +30,13 @@
       }
     }
   }
-
-  .footer {
-    height: 5rem;
-    line-height: 1;
-  }
 }
 
 :host-context(.is-dark-theme) {
+  footer {
+    background-color: rgba(var(--palette-foreground-text-dark), 0.05);
+  }
+
   main {
     .info-message-container {
       .info-message {

apps/client/src/app/app.component.ts

@@ -32,6 +32,8 @@ export class AppComponent implements OnDestroy, OnInit {
   public currentRoute: string;
   public currentYear = new Date().getFullYear();
   public deviceType: string;
+  public hasPermissionForBlog: boolean;
+  public hasPermissionForSubscription: boolean;
   public info: InfoItem;
   public pageTitle: string;
   public user: User;
@@ -55,6 +57,17 @@ export class AppComponent implements OnDestroy, OnInit {
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+    this.info = this.dataService.fetchInfo();
+
+    this.hasPermissionForBlog = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableBlog
+    );
+
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
 
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
@@ -64,8 +77,6 @@ export class AppComponent implements OnDestroy, OnInit {
         const urlSegments = urlSegmentGroup.segments;
         this.currentRoute = urlSegments[0].path;
 
-        this.info = this.dataService.fetchInfo();
-
         if (this.deviceType === 'mobile') {
           setTimeout(() => {
             const index = this.title.getTitle().indexOf('–');

apps/client/src/app/app.module.ts

@@ -14,6 +14,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@@ -40,6 +41,7 @@ export function NgxStripeFactory(): string {
     BrowserAnimationsModule,
     BrowserModule,
     GfHeaderModule,
+    GfLogoModule,
     GfSubscriptionInterstitialDialogModule,
     HttpClientModule,
     MarkdownModule.forRoot(),

apps/client/src/app/pages/about/about-page.html

@@ -40,7 +40,7 @@
           </ng-container>
           <ng-container *ngIf="hasPermissionForStatistics"
             >Check the system status at
-            <a href="https://status.ghostfol.io" title="Ghostfolio status"
+            <a href="https://status.ghostfol.io" title="Ghostfolio Status"
               >status.ghostfol.io</a
             >.</ng-container
           >