Wm2 9 component top navbar (#207)

* Add nav bar with simple scrolling

* Clean up

Author: jasperdifran

frontend/src/App.vue

@@ -1,19 +1,6 @@
 <template>
   <v-app id="main-app">
-    <!-- Navigation bar/app bar goes here -->
-    <v-app-bar app color="transparent" class="blend" elevation="0" width="100vw">
-      <!-- Logo -->
-      <RouterLink to="/" v-on:click.native="showMenu = false">
-        <v-container class="fill-height" style="max-height: 64px; max-width:100px">
-          <v-img src="@/assets/csesocwhiteblue.png" />
-        </v-container>
-      </RouterLink>
-
-      <div class="flex-grow-1"></div>
-
-      <!-- Menu button -->
-      <v-app-bar-nav-icon color="white" class="ma-2" data-cy="menu-toggle" @click.stop="showMenu = !showMenu" />
-    </v-app-bar>
+    <Navbar />
     <v-main class="pa-0">
       <Menu v-if="showMenu" @shown="onMenuCollapse" />
       <RouterView style="overflow-x: hidden" />
@@ -25,6 +12,7 @@
 <script>
 import Footer from '@/components/Footer';
 import Menu from '@/components/Menu';
+import Navbar from '@/components/Navbar';
 
 export default {
   name: 'App',
@@ -34,6 +22,7 @@ export default {
   components: {
     Footer,
     Menu,
+    Navbar,
   },
   methods: {
     onMenuCollapse(val) {
@@ -62,5 +51,4 @@ html, body {
 .blend{
   mix-blend-mode: exclusion;
 }
-
 </style>

frontend/src/components/Navbar.vue

@@ -0,0 +1,93 @@
+<!--
+  Navbar
+  --
+  This component is static on the top of the page and displays links to different parts
+    the screen
+-->
+
+<template>
+  <v-app-bar app color="rgba(0,0,51,0.7)" elevation="0" width="100vw">
+    <!-- Large screen display -->
+    <v-container class="hidden-sm-and-down">
+      <v-row class="d-flex justify-center">
+        <v-col class="d-flex align-center justify-start">
+          <a @click="goto('showcase')" style="text-decoration: none;">
+            <v-img contain max-height="60px" max-width="100px" src="@/assets/csesocwhiteblue.png" />
+          </a>
+        </v-col>
+        <v-col class="d-flex align-center justify-center">
+          <a @click="goto('mission')" style="text-decoration: none;">
+            <v-btn text color="white">ABOUT US</v-btn>
+          </a>
+        </v-col>
+        <v-col class="d-flex align-center justify-center">
+          <a @click="goto('student-resources')" style="text-decoration: none;">
+            <v-btn text color="white">GET IN TOUCH</v-btn>
+          </a>
+        </v-col>
+        <v-col class="d-flex align-center justify-center">
+          <a @click="goto('student-resources')" style="text-decoration: none;">
+              <v-btn text color="white">RESOURCES</v-btn>
+          </a>
+        </v-col>
+        <v-col class="d-flex align-center justify-center">
+            <v-btn text to="/sponsorship" color="white">SPONSORSHIP</v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- Smaller screen container -->
+    <v-container class="hidden-md-and-up">
+      <v-row class="d-flex justify-space-between">
+        <v-col class="d-flex align-center">
+          <RouterLink  to="/" style="text-decoration: none;" v-on:click.native="showMenu = false">
+            <v-img contain max-height="40px" max-width="100px" src="@/assets/csesocwhiteblue.png" />
+          </RouterLink>
+        </v-col>
+        <v-col class="d-flex justify-end">
+          <v-menu bottom left>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn dark icon v-bind="attrs" v-on="on">
+                <v-icon>mdi-menu</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item>
+                <a @click="goto('mission')" style="text-decoration: none; color: black;">
+                  About us
+                </a>
+              </v-list-item>
+              <v-list-item>
+                <a @click="goto('community')" style="text-decoration: none; color: black;">
+                  Get in touch
+                </a>
+              </v-list-item>
+              <v-list-item>
+                <a @click="goto('student-resources')" style="text-decoration: none; color: black;">
+                  Resources
+                </a>
+              </v-list-item>
+              <v-list-item>
+                <RouterLink style="text-decoration: none; color: black;" to="/sponsorship">
+                  Sponsorship
+                </RouterLink>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-app-bar>
+</template>
+
+<script type="text/javascript">
+export default {
+  name: 'Navbar',
+  methods: {
+    goto(refName) {
+      const element = document.getElementById(refName);
+      element.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    }
+  }
+};
+</script>