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

<header>
  <gf-header
    class="position-fixed w-100"
    [currentRoute]="currentRoute"
    [info]="info"
    [pageTitle]="pageTitle"
    [user]="user"
    (signOut)="onSignOut()"
  ></gf-header>
</header>

<main role="main">
  <div
    *ngIf="canCreateAccount || (info?.systemMessage && user)"
    class="container info-message-container"
  >
    <div class="row">
      <div class="col-md-8 offset-md-2 text-center">
        <a
          *ngIf="canCreateAccount"
          class="text-center"
          [routerLink]="['/register']"
        >
          <div
            class="cursor-pointer d-inline-block info-message px-3 py-2"
            (click)="onCreateAccount()"
          >
            <span>You are using the Live Demo.</span>
            <span class="a ml-2">Create Account</span>
          </div></a
        >
        <div
          *ngIf="!canCreateAccount && info?.systemMessage && user"
          class="cursor-pointer d-inline-block info-message px-3 py-2 text-truncate"
          (click)="onShowSystemMessage()"
        >
          {{ info.systemMessage }}
        </div>
      </div>
    </div>
  </div>

  <router-outlet></router-outlet>
</main>

<footer
  *ngIf="
    (currentRoute === 'blog' ||
      currentRoute === 'faq' ||
      currentRoute === 'features' ||
      currentRoute === 'markets' ||
      currentRoute === 'open' ||
      currentRoute === 'pricing' ||
      currentRoute === 'resources' ||
      currentRoute === 'register' ||
      currentRoute === 'start') &&
    deviceType !== 'mobile'
  "
  class="d-flex justify-content-center py-4 w-100"
>
  <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>
          <li>&nbsp;</li>
          <li>
            <a href="../de" title="Ghostfolio in Deutsch">Deutsch</a>
          </li>
          <li>
            <a href="../en" title="Ghostfolio in English">English</a>
          </li>
          <li>
            <a href="../es" title="Ghostfolio in Español">Español</a>
          </li>
          <li>
            <a href="../fr" title="Ghostfolio en Français">Français</a>
          </li>
          <li>
            <a href="../it" title="Ghostfolio in Italiano">Italiano</a>
          </li>
          <li>
            <a href="../nl" title="Ghostfolio in Nederlands">Nederlands</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>

    <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
        >
      </div>
    </div>
  </div>
</footer>