From 69b93d435671f59a0d88da7b1f255994694d584c Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 15:39:33 +0800
Subject: [PATCH 1/5] [+] Create navigation bar component

---
 src/components/navigation/navigation.scss |  0
 src/components/navigation/navigation.ts   | 21 +++++++++++++++++++++
 src/components/navigation/navigation.vue  | 14 ++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 src/components/navigation/navigation.scss
 create mode 100644 src/components/navigation/navigation.ts
 create mode 100644 src/components/navigation/navigation.vue

diff --git a/src/components/navigation/navigation.scss b/src/components/navigation/navigation.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/navigation/navigation.ts b/src/components/navigation/navigation.ts
new file mode 100644
index 0000000..f58a281
--- /dev/null
+++ b/src/components/navigation/navigation.ts
@@ -0,0 +1,21 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import Constants from '@/constants';
+
+/**
+ * This component is the top navigation bar
+ */
+@Component({
+    components: {},
+})
+export default class Navigation extends Vue
+{
+    public activeIndex: string = "0";
+
+    /**
+     * This function is called when the selection changes.
+     */
+    public onSelect()
+    {
+
+    }
+}
diff --git a/src/components/navigation/navigation.vue b/src/components/navigation/navigation.vue
new file mode 100644
index 0000000..639205b
--- /dev/null
+++ b/src/components/navigation/navigation.vue
@@ -0,0 +1,14 @@
+<template>
+    <div id="navigation">
+        <el-menu :default-active="activeIndex" mode="horizontal" @select="onSelect">
+
+            <el-menu-item index="overall">Overall</el-menu-item>
+
+
+        </el-menu>
+        <div class="line"></div>
+    </div>
+</template>
+
+<script src="./navigation.ts" lang="ts"></script>
+<style src="./navigation.scss" lang="scss"></style>

From 7e73d6581bcceab04995e446fe9f68f5a4cc89ba Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 15:39:54 +0800
Subject: [PATCH 2/5] [+] Add "courses" property to navigation comp.

---
 src/components/navigation/navigation.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/navigation/navigation.ts b/src/components/navigation/navigation.ts
index f58a281..ccfaab8 100644
--- a/src/components/navigation/navigation.ts
+++ b/src/components/navigation/navigation.ts
@@ -11,6 +11,8 @@ export default class Navigation extends Vue
 {
     public activeIndex: string = "0";
 
+    @Prop() courses: any;
+
     /**
      * This function is called when the selection changes.
      */

From 822a1fecc2acdfbd54b2c2c05db56d4287b027f5 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 15:40:06 +0800
Subject: [PATCH 3/5] [+] Show courses with v-for

---
 src/components/navigation/navigation.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/navigation/navigation.vue b/src/components/navigation/navigation.vue
index 639205b..e994c75 100644
--- a/src/components/navigation/navigation.vue
+++ b/src/components/navigation/navigation.vue
@@ -4,6 +4,10 @@
 
             <el-menu-item index="overall">Overall</el-menu-item>
 
+            <el-submenu index="courses">
+                <template slot="title">Courses</template>
+                <el-menu-item v-for="course in courses" :index="`courses-${course}`">{{course}}</el-menu-item>
+            </el-submenu>
 
         </el-menu>
         <div class="line"></div>

From 1dcb26cd2552aeaba3d7d2b2a5add97e9727dac4 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 15:40:24 +0800
Subject: [PATCH 4/5] [+] Import navigation in app.ts

---
 src/components/app/app.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/app/app.ts b/src/components/app/app.ts
index 8ffec8d..5c9280c 100644
--- a/src/components/app/app.ts
+++ b/src/components/app/app.ts
@@ -1,8 +1,9 @@
 import {Component, Vue} from 'vue-property-decorator';
 import Login from '@/components/login/login';
+import Navigation from '@/components/navigation/navigation';
 
 @Component({
-    components: {Login},
+    components: {Login, Navigation},
 })
 export default class App extends Vue
 {

From 36b88571917719cc8bd33922a43e999b5b4caf32 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <admin@moecraft.cc>
Date: Wed, 21 Aug 2019 15:41:05 +0800
Subject: [PATCH 5/5] [+] Add navigation comp. to app.vue

---
 src/components/app/app.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/app/app.vue b/src/components/app/app.vue
index 06e3776..9e2c45e 100644
--- a/src/components/app/app.vue
+++ b/src/components/app/app.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="app">
         <login v-if="showLogin" v-on:login:courses="onLogin"></login>
-
+        <navigation :courses="courses"></navigation>
     </div>
 </template>