<template>
  <header>
    <nav class="navbar">
      <div class="container-fluid">
        <a
          class="navbar-brand"
          href="/"
        >RES</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navigation"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <i class="bi bi-list" />
        </button>
        <div
          id="navigation"
          class="collapse navbar-collapse"
        >
          <div class="navbar-nav">
            <router-link
              class="nav-link"
              :to="{name: 'IntroPortal'}"
              active-class="active"
            >
              Info
            </router-link>
            <router-link
              class="nav-link"
              :to="{name: 'steam'}"
              active-class="active"
            >
              Steam
            </router-link>
            <router-link
              class="nav-link"
              :to="{name: 'remcs'}"
              active-class="active"
            >
              Minecraft
            </router-link>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <router-view />
  </main>
  <footer>
    <!-- TODO: Proper footer. -->
  </footer>
</template>

<script>
  export default {
    data() {
      return {
        greeting: "Hello World!"
      };
    }
  };
</script>

<style>
  .greeting {
    color: red;
    font-weight: bold;
  }
</style>