Add top navigation bar (#25)

src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <main v-if="loaded">
-    <TopBar v-if="!isFullscreen" />
     <router-view />
   </main>
   <main class="loading-box" v-else>
@@ -29,15 +28,12 @@ h1.loading-message {
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { Action, Getter } from "vuex-class";
-import TopBar from "@/components/Navigation/TopBar.vue";
 import { loadSets } from "@/mlpccg/set";
 import { AppState } from "./store/types";
 import { getCards } from "./mlpccg/database";
 
 @Component({
-  components: {
-    TopBar
-  }
+  components: {}
 })
 export default class App extends Vue {
   @Action showLoading!: (msg: string) => void;

src/components/Navigation/TopBar.vue

@@ -1,14 +0,0 @@
-<template>
-  <nav></nav>
-</template>
-
-<style lang="scss" scoped></style>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-
-@Component({
-  components: {}
-})
-export default class TopBar extends Vue {}
-</script>

src/components/Navigation/TopNav.vue

@@ -0,0 +1,93 @@
+<template>
+  <nav>
+    <router-link
+      :class="routeClass(route)"
+      v-for="route in routes"
+      :key="route"
+      :to="{ name: route }"
+      >{{ prettyTitle(route) }}</router-link
+    >
+  </nav>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
+nav {
+  margin-bottom: 1rem;
+  display: flex;
+  background: linear-gradient(
+    to bottom,
+    rgba(200, 230, 250, 0.3),
+    rgba(100, 180, 255, 0.1)
+  );
+
+  .entry {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50px;
+    max-width: 300px;
+    text-align: center;
+    color: $grey-lighter;
+
+    border-right: 1px solid rgba(0, 50, 100, 0.5);
+
+    &:hover {
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.5),
+        rgba(100, 100, 100, 0.1)
+      );
+      cursor: pointer;
+      color: $white;
+    }
+
+    &.current,
+    &.current:hover {
+      background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0.7),
+        rgba(100, 100, 100, 0.1)
+      );
+      color: $grey-lighter;
+      cursor: normal;
+    }
+  }
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+const routes = ["lobby", "deck-editor"];
+
+@Component({
+  components: {}
+})
+export default class TopNav extends Vue {
+  private routes!: string[];
+
+  private data() {
+    return {
+      routes
+    };
+  }
+
+  private prettyTitle(name: string): string {
+    const route = this.$router.resolve({ name });
+    if (!route || !route.resolved.meta || !route.resolved.meta.topnav) {
+      return name;
+    }
+    return route.resolved.meta.topnav;
+  }
+
+  private routeClass(name: string) {
+    return {
+      entry: true,
+      current: this.$route.name == name
+    };
+  }
+}
+</script>

src/router.ts

@@ -21,7 +21,10 @@ export default new Router({
     {
       path: "/build",
       name: "deck-editor",
-      component: DeckBuilder
+      component: DeckBuilder,
+      meta: {
+        topnav: "Deck Builder"
+      }
     },
     {
       path: "/game",
@@ -36,7 +39,10 @@ export default new Router({
     {
       path: "/lobby",
       name: "lobby",
-      component: Lobby
+      component: Lobby,
+      meta: {
+        topnav: "Lobby"
+      }
     },
     {
       path: "/room",

src/views/DeckBuilder.vue

@@ -1,5 +1,6 @@
 <template>
   <section class="deckbuilder">
+    <TopNav class="topnav" />
     <section class="cardlist">
       <section class="filters">
         <div class="row">
@@ -78,6 +79,11 @@
   height: 100vh;
   display: grid;
   grid-template-columns: 3fr minmax(250px, 1fr);
+  grid-template-rows: auto 1fr;
+}
+
+.topnav {
+  grid-column: 1/3;
 }
 
 .cardlist {
@@ -185,6 +191,7 @@
 import { Component, Vue } from "vue-property-decorator";
 import DeckList from "@/components/DeckBuilder/DeckList.vue";
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
+import TopNav from "@/components/Navigation/TopNav.vue";
 import {
   Card,
   CardFilter,
@@ -276,6 +283,7 @@ function sortByColor(a: Card, b: Card) {
 
 @Component({
   components: {
+    TopNav,
     DeckList,
     CardPicker
   }

src/views/Lobby.vue

@@ -1,14 +1,26 @@
 <template>
-  <section class="lobby"></section>
+  <section class="lobby">
+    <TopNav />
+  </section>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.lobby {
+  background: url("../assets/images/backgrounds/menubg.webp") center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 100vh;
+}
+</style>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import TopNav from "@/components/Navigation/TopNav.vue";
 
 @Component({
-  components: {}
+  components: {
+    TopNav
+  }
 })
 export default class Lobby extends Vue {}
 </script>