Enhancements: Dropdown Menu, Google Sheet Projects, Home Link, and Routing Implementation(alumni team and current team)

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
+    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
+},
   "dependencies": {
     "core-js": "^3.6.4",
     "node-sass": "^7.0.3",
@@ -42,4 +42,7 @@
       "git add"
     ]
   }
+
 }
+
+

src/components/Header.vue

@@ -1,30 +1,51 @@
 <template lang="pug">
-v-card.elevation-24
-        v-app-bar(app clipped-right flat floating style="opacity:1.0")
-
-            v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
-            v-avatar(size="48px")
-                v-img(src="../assets/logo.jpeg")
-            v-toolbar-title.hidden-sm-and-down.white--text
-                span.title.ml-3.mr-5(text style="color:black") Devlup Labs&nbsp;
-            v-spacer
-            div.hidden-sm-and-down
-              v-btn.pa-2.ma-1(text v-for="link in links" :key="link.text" :to="{name:link.text}" label exact) {{link.text}} 
-        v-navigation-drawer(v-model="drawer" app left temporary style="z-index:5")
-          v-list(dense)
-            v-list-item( v-for="link in links" :key="link.text" @click="" :to="{name:link.text}" exact)
-              v-list-item-action
-                v-icon {{link.icon}}
-              v-list-item-content
-                v-list-item-title.grey--text {{link.text}}
+  v-card.elevation-24
+    v-app-bar(app clipped-right flat floating style="opacity: 1.0")
+      v-app-bar-nav-icon.hidden-md-and-up(@click.stop="drawer = !drawer")
+      router-link(to='/')
+        v-avatar(size="48px")
+          v-img(src="../assets/logo.jpeg") 
+      router-link(to='/', style="text-decoration: none")
+        v-toolbar-title.hidden-sm-and-down.white--text()
+          span.title.ml-3.mr-5(text style="color: black", ) Devlup Labs&nbsp;
+      v-spacer
+      div.hidden-sm-and-down
+        v-btn(pa-2.ma-1 v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" label exact sty style="box-shadow : none") {{ link.text }}
+        v-btn#menu-activator(pa-2.ma-1 :key="team" style="box-shadow : none")  Team
+          v-menu(activator='#menu-activator')
+            v-list
+              v-list-item(pa-2.ma-1 v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
+                v-list-item-title {{ item.text }} 
+
+    v-navigation-drawer(v-model="drawer" app left temporary style="z-index: 5")
+      v-list(dense)  
+        v-list-item(v-for="link in links" :key="link.text" :to="{ name: link.text }" v-if="link.text !== 'Team' && link.text !== 'CurrentTeam' && link.text !== 'AlumniTeam'" exact sty style="box-shadow : none") 
+          v-list-item-action
+            v-icon {{ link.icon }}
+          v-list-item-content
+            v-list-item-title.grey--text {{ link.text }}
+
+        v-list-item
+          v-list-item-action
+            v-icon mdi-account-group
+          v-menu
+            template.ml-16(v-slot:activator="{ on }")
+              v-list-item-content(v-on="on")
+                v-list-item-title.grey--text Team
+            v-list
+              v-list-item(v-for='(item, index) in teams', :key='index', :value='index' :to="{name: item.link}")
+                 v-list-item-title {{ item.text }}
+
+
+
 </template>
 
 <script>
 export default {
   name: "Header",
-
   data() {
     return {
+      show: false,
       drawer: null,
       links: [
         { text: "Home", icon: "mdi-home" },
@@ -33,10 +54,30 @@ export default {
         { text: "Timeline", icon: "mdi-timeline-text" },
         { text: "Blog", icon: "mdi-forum" },
         { text: "Videos", icon: "mdi-television" },
-        { text: "Team", icon: "mdi-human-male-male" },
+        { text: "Team", icon: "mdi-human-male-male" }, // Empty routeName for the dropdown menu
         { text: "WoC", icon: "mdi-briefcase-edit-outline" }
+      ],
+      teams: [
+        {
+          text: "Current Team",
+          link: "current_team",
+          icon: "mdi-human-male-male"
+        },
+        {
+          text: "Alumni Team",
+          link: "alumni_team",
+          icon: "mdi-human-male-male"
+        }
       ]
     };
+  },
+  computed: {
+    teamLinks() {
+      return [
+        { text: "Current Team", icon: "mdi-human-male-male" },
+        { text: "Alumni Team", icon: "mdi-human-male-male" }
+      ];
+    }
   }
 };
 </script>

src/router/index.js

@@ -1,6 +1,5 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-
 Vue.use(VueRouter);
 
 const routes = [
@@ -47,16 +46,22 @@ const routes = [
     meta: { title: "Podcast" }
   },
   {
-    path: "/team",
-    name: "Team",
-    component: () => import("../views/Profile"),
-    meta: { title: "Team" }
+    path: "/current_team",
+    name: "current_team",
+    component: () => import("../views/CurrentTeam"), // Replace "../views/Profile" with the path to the component for the current team
+    meta: { title: "Current Team" }
   },
   {
     path: "/WoC",
     name: "WoC",
     component: () => import("../views/WoC"),
     meta: { title: "WoC" }
+  },
+  {
+    path: "/alumni_team",
+    name: "alumni_team",
+    component: () => import("../views/AlumniTeam"), // Add the route for the AlumniTeam component
+    meta: { title: "Alumni Team" }
   }
 ];
 

src/views/Profile.vue → src/views/AlumniTeam.vue

@@ -1,43 +1,42 @@
-<!-- Profile[0]->Profile index -->
-<template lang="pug">
-div(align='center', justify='center')
-  div(v-if="loading")
-        Preloader
-  div(v-else)
-    v-container
-      v-row(justify='left')
-        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
-          ProfileCard(:Profile='Profile')
-</template>
-
-<script>
-const ProfileCard = () => import("../components/ProfileCard");
-const Preloader = () => import("../components/Preloader");
-export default {
-  name: "Profile",
-  components: { ProfileCard, Preloader },
-  data: () => ({
-    loading: true,
-    profiles: []
-  }),
-  methods: {
-    fetchProfiles() {
-      // spreadsheetID=17O_B9OCnz6Byey-Y1o0K5WCTTlXJterlwNDgpjSN-s4
-      const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
-      this.loading = true;
-      fetch(url)
-        .then(e =>
-          e.json().then(e => {
-            console.log(e);
-            this.profiles = e;
-            console.log(this.profiles);
-          })
-        )
-        .finally(() => (this.loading = false));
-    }
-  },
-  mounted() {
-    this.fetchProfiles();
-  }
-};
-</script>
+<!-- Profile[0]->Profile index -->
+<template lang="pug">
+div(align='center', justify='center')
+  div(v-if="loading")
+        Preloader
+  div(v-else)
+    v-container
+      v-row(justify='left')
+        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
+          ProfileCard(:Profile='Profile')
+</template>
+
+<script>
+const ProfileCard = () => import("../components/ProfileCard");
+const Preloader = () => import("../components/Preloader");
+export default {
+  name: "Profile",
+  components: { ProfileCard, Preloader },
+  data: () => ({
+    loading: true,
+    profiles: []
+  }),
+  methods: {
+    fetchProfiles() {
+      const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
+      this.loading = true;
+      fetch(url)
+        .then(e =>
+          e.json().then(e => {
+            console.log(e);
+            this.profiles = e;
+            console.log(this.profiles);
+          })
+        )
+        .finally(() => (this.loading = false));
+    }
+  },
+  mounted() {
+    this.fetchProfiles();
+  }
+};
+</script>

src/views/CurrentTeam.vue

@@ -0,0 +1,42 @@
+<!-- Profile[0]->Profile index -->
+<template lang="pug">
+div(align='center', justify='center')
+  div(v-if="loading")
+        Preloader
+  div(v-else)
+    v-container
+      v-row(justify='left')
+        v-flex.mb-10(v-for='Profile in profiles', :key='Profile[0]', xs12='',sm12='', md6='',lg4='',xl4='')
+          ProfileCard(:Profile='Profile')
+</template>
+
+<script>
+const ProfileCard = () => import("../components/ProfileCard");
+const Preloader = () => import("../components/Preloader");
+export default {
+  name: "Profile",
+  components: { ProfileCard, Preloader },
+  data: () => ({
+    loading: true,
+    profiles: []
+  }),
+  methods: {
+    fetchProfiles() {
+      const url = `https://script.google.com/macros/s/AKfycbwprDq5bguYad1gsfCLxbWxM1YXZfVlWiXYK1WCbrPj5WO8JbxjqSbnieVIoosOgMbVMA/exec`;
+      this.loading = true;
+      fetch(url)
+        .then(e =>
+          e.json().then(e => {
+            console.log(e);
+            this.profiles = e;
+            console.log(this.profiles);
+          })
+        )
+        .finally(() => (this.loading = false));
+    }
+  },
+  mounted() {
+    this.fetchProfiles();
+  }
+};
+</script>

src/views/Project.vue

@@ -23,7 +23,6 @@ export default {
   }),
   methods: {
     fetchProjects() {
-      // spreadsheetID=17O_B9OCnz6Byey-Y1o0K5WCTTlXJterlwNDgpjSN-s4
       const url = `https://script.google.com/macros/s/AKfycbxsb_2WN21NJ4p_yEVS8DoCIcs-3lL9VlB5zgbGXeEhfERHkjkIcFOTvkhw1m69irgH7g/exec`;
       this.loading = true;
       fetch(url)