Fix navbar links (#219)

Author: jasperdifran

frontend/src/App.vue

@@ -1,6 +1,5 @@
 <template>
   <v-app id="main-app">
-    <Navbar />
     <v-main class="pa-0">
       <Menu v-if="showMenu" @shown="onMenuCollapse" />
       <RouterView style="overflow-x: hidden" />
@@ -12,7 +11,7 @@
 <script>
 import Footer from '@/components/Footer';
 import Menu from '@/components/Menu';
-import Navbar from '@/components/Navbar';
+// import Navbar from '@/components/Navbar';
 
 export default {
   name: 'App',
@@ -22,7 +21,7 @@ export default {
   components: {
     Footer,
     Menu,
-    Navbar,
+    // Navbar,
   },
   methods: {
     onMenuCollapse(val) {

frontend/src/components/Navbar.vue frontend/src/components/PrimaryNavbar.vuefrontend/src/components/Navbar.vue renamed to frontend/src/components/PrimaryNavbar.vue

@@ -1,8 +1,8 @@
 <!--
-  Navbar
+  PrimaryNavbar
   --
-  This component is static on the top of the page and displays links to different parts
-    the screen
+  This component is static on the top of Home page and links to different parts of the screen.
+  Also links to the Sponsorship page.
 -->
 
 <template>
@@ -92,7 +92,7 @@
 
 <script type="text/javascript">
 export default {
-  name: 'Navbar',
+  name: 'PrimaryNavbar',
   methods: {
     goto(refName) {
       const element = document.getElementById(refName);

frontend/src/components/SecondaryNavbar.vue

@@ -0,0 +1,63 @@
+<!--
+  SecondaryNavbar
+  --
+  This component is static on the top of the About and Sponsorship pages. It links to
+  each one and the home `/` page.
+-->
+
+<template>
+  <v-app-bar app color="rgba(0,0,51,0.9)" elevation="0" width="100vw">
+    <!-- Large screen display -->
+    <v-container class="hidden-sm-and-down">
+      <v-row class="d-flex">
+        <v-col class="d-flex ps-10 align-center justify-start">
+          <RouterLink to="/" style="text-decoration: none;" v-on:click.native="showMenu = false">
+            <v-img contain max-height="60px" max-width="100px" src="@/assets/csesocwhiteblue.png" />
+          </RouterLink>
+        </v-col>
+        <v-col class="d-flex align-center justify-end pr-10">
+          <v-btn text to='/about' class="mr-2" color="white">ABOUT US</v-btn>
+          <v-btn text to="/sponsors" class="ms-2" 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>
+                <RouterLink to="/about" style="text-decoration: none; color: black;">
+                  About us
+                </RouterLink>
+              </v-list-item>
+              <v-list-item>
+                <RouterLink style="text-decoration: none; color: black;" to="/sponsors">
+                  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: 'SecondaryNavbar',
+};
+</script>

frontend/src/views/About.vue

@@ -11,6 +11,7 @@
 
 <template>
   <v-app>
+    <SecondaryNavbar />
     <v-parallax height="300" src="../assets/fade.png"></v-parallax>
     <!-- About -->
     <v-container ref="content-start" style="padding: 0px 30px 10px 30px">
@@ -317,6 +318,7 @@
 
 <script>
 import HeaderTitle from '@/components/HeaderTitle';
+import SecondaryNavbar from '../components/SecondaryNavbar';
 
 const fs = require('@/assets/execs_directs.json');
 
@@ -326,7 +328,8 @@ export default {
     execsDirects: fs
   }),
   components: {
-    HeaderTitle
+    HeaderTitle,
+    SecondaryNavbar
   }
 };
 </script>

frontend/src/views/Home/AboutUs.vue

@@ -14,7 +14,7 @@
         </v-col>
         <v-col xs="12" sm="6" align-self="center">
           <p data-cy="mission-statement" class="text--md">{{ mission.statement }}</p>
-          <v-btn to="/about" block outlined color="white" icon class="btn--sm">
+          <v-btn block outlined color="white" icon class="btn--sm">
             SEE MORE
           </v-btn>
         </v-col>
@@ -45,4 +45,7 @@ export default {
   max-width: 100%;
   max-height: 100%;
 }
+.content {
+  padding-top: 50px;
+}
 </style>

frontend/src/views/Home/CommunityLink.vue

@@ -138,6 +138,7 @@ export default {
   transform: scale(1.05);
 }
 .content {
+  padding-top: 50px;
   @media screen and (max-width: 960px) {
     padding-left: 20px;
     padding-right: 20px;

frontend/src/views/Home/EventDisplay.vue

@@ -70,6 +70,7 @@ export default {
 .Container {
   display: flex;
   flex-direction: row;
+  padding-top: 50px;
 }
 .Embed {
   display: flex;

frontend/src/views/Home/Home.vue

@@ -13,6 +13,7 @@
 
 <template>
   <div id="home">
+    <PrimaryNavbar />
     <!-- Showcase -->
     <Showcase />
     <!-- Mission -->
@@ -39,6 +40,7 @@ import Slideshow from '@/views/Home/Slideshow';
 import StudentResources from '@/views/Home/StudentResources';
 import SponsorUs from '@/views/Home/SponsorUs';
 import APIClient from '../../utils/APIClient';
+import PrimaryNavbar from '../../components/PrimaryNavbar';
 
 export default {
   name: 'Home',
@@ -56,6 +58,7 @@ export default {
     Slideshow,
     StudentResources,
     SponsorUs,
+    PrimaryNavbar,
   },
   mounted() {
     APIClient.eventsAPI()

frontend/src/views/Sponsor.vue

@@ -8,6 +8,7 @@
 -->
 <template>
   <div>
+    <SecondaryNavbar />
     <div class="down-button" @click="onClickScroll" @scroll.passive="handleScroll" ref="downButton">
       <img src="@/assets/downbutton.png" />
     </div>
@@ -89,6 +90,7 @@
 
 <script type="text/javascript">
 import SponsorModal from '@/components/SponsorModal';
+import SecondaryNavbar from '@/components/SecondaryNavbar';
 
 const sponsorData = require('@/assets/sponsors_mini.json');
 
@@ -106,7 +108,8 @@ export default {
     smallLogoFilter: 5
   }),
   components: {
-    SponsorModal
+    SponsorModal,
+    SecondaryNavbar
   },
   computed: {
     // functions to determine sizing category of sponsor based on their value