AltitudeWeb/frontend/src/app/header/header.component.html

<ng-container>
  <header id="top">
    <nav id="nav" [ngClass]="active">
      <div class="container">
        <div id="mobile_nav">
          <div id="menu_toggle">
            <!--A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
            <input type="checkbox"/>
            <!--Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonald's stuff.-->
            <span class="hamburger"></span>
            <span class="hamburger"></span>
            <span class="hamburger"></span>
            <!--Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
            <ul id="mobile_nav_list">
              <li><a href="/">Home</a></li>
              <li>
                <a href="#">Features</a>
                <ul class="mobile_dd">
                  <li><a [routerLink]="['/map']">Map</a></li>
                  <li><a [routerLink]="['/economy']">Economy</a></li>
                  <!-- <li><a [routerLink]="['/events']">Events</a></li> -->
                  <li><a [routerLink]="['/claiming']">Land Claiming</a></li>
                  <li><a [routerLink]="['/mypet']">MyPet</a></li>
                  <li><a [routerLink]="['/warps']">Warps</a></li>
                  <li><a [routerLink]="['/skyblock']">Skyblock</a></li>
                  <li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
                  <li><a
                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
                    Board</a></li>
                </ul>
              </li>
              <li>
                <a href="#">Reference</a>
                <ul class="mobile_dd">
                  <li><a [routerLink]="['/guide']">Guide Book</a></li>
                  <!-- <li><a [routerLink]="['/faq']">FAQ</a></li> -->
                  <li><a [routerLink]="['/ranks']">Ranks</a></li>
                  <li><a [routerLink]="['/rules']">Rules</a></li>
                  <li><a [routerLink]="['/commandlist']">Command List</a></li>
                  <li><a [routerLink]="['/mapart']">Mapart</a></li>
                  <li><a [routerLink]="['/lag']">Reducing Lag</a></li>
                  <li><a [routerLink]="['/staffpowers']">Staff Powers</a></li>
                  <li><a [routerLink]="['/nicknames']">Nicknames</a></li>
                  <li><a [routerLink]="['/bans']">Bans</a></li>
                </ul>
              </li>
              <li><a href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
              <li><a [routerLink]="['/vote']">Vote</a></li>
              <li><a href="https://store.alttd.com">Store</a></li>
              <li>
                <a href="#">Altitude</a>
                <ul class="mobile_dd">
                  <li><a [routerLink]="['/about']">About Us</a></li>
                  <li><a [routerLink]="['/socials']">Socials</a></li>
                  <li><a [routerLink]="['/team']">Team</a></li>
                  <li><a [routerLink]="['/birthdays']">Famous Birthdays</a></li>
                  <li><a [routerLink]="['/community']">Community</a></li>
                  <li><a href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
                  <li><a href="https://alttd.com/appeal">Ban Appeal</a></li>
                  <li><a href="https://alttd.com/blog/">Blog</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <a href="/"><img ngSrc="/public/img/logos/logo.png" alt="Altitude Server Logo" height="319" width="550"></a>
        <ul id="nav_list">
          <li class="nav_li"><a [id]="getCurrentPageId(['home'])" class="nav_link" href="/">Home</a>
          </li>
          <li class="nav_li">
          <span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
          'skyblock', 'claiming'])" class="nav_link fake_link" [ngClass]="active">Features</span>
            <ul class="dropdown">
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
              <!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
              <li class="nav_li"><a class="nav_link2"
                                    href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
                Board</a></li>
            </ul>
          </li>
          <li class="nav_li">
          <span
            [id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'art', 'lag', 'staffpowers',
             'nicknames', 'bans'])" class="nav_link fake_link" [ngClass]="active">Reference</span>
            <ul class="dropdown">
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
              <!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Bans</a></li>
            </ul>
          </li>
          <li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
                                href="https://discordapp.com/invite/TGqpzCJ" [ngClass]="active">Discord</a></li>
          <li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']" [ngClass]="active">Vote</a>
          </li>
          <li class="nav_li">
            <a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com" [ngClass]="active">Store</a>
          </li>
          <li class="nav_li">
            <a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
               class="nav_link fake_link" [ngClass]="active">Altitude</a>
            <ul class="dropdown">
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
              <li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
              <li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener"
                                    href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
              <li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
                Appeal</a></li>
              <li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
            </ul>
          </li>
        </ul>
        <app-theme></app-theme>
      </div>
    </nav>


    <ng-container *ngIf="current_page === 'home'">
      <div class="title">
        <h1 style="display: none;">{{ title }}</h1>
        <img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
             width="550">
        <h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
      </div>
      <a id="scroll-button" (click)="scrollToSection()">
        <span></span>
        <p style="display: none;">Scroll Down</p>
      </a>
    </ng-container>
    <ng-container *ngIf="current_page !== 'home'">
      <div class="title">
        <h1>{{ title }}</h1>
        <h2>{{ sub_title }}</h2>
      </div>
    </ng-container>
  </header>
</ng-container>