From 83bdfd24706f8fe07865dea0bf8315b8d8eba1b1 Mon Sep 17 00:00:00 2001
From: Alex Mayer <amayer5125@gmail.com>
Date: Tue, 31 Oct 2023 16:23:54 -0400
Subject: [PATCH] Make Home, Tools, and Contribute Links Work (#36)

Closes #28
---
 src/components/MenuBar.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index b1bd5ec..677ad5f 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -10,12 +10,17 @@
                 </div>
                 <!-- Primary Navbar items -->
                 <div class="hidden md:flex items-center space-x-1">
-                    <a href="" class="py-4 px-2 text-purple-400 border-b-4 border-purple-400 font-semibold ">Home</a>
+                    <router-link :to="{ name: 'home' }"
+                        activeClass="border-b-4 border-purple-400"
+                        class="py-4 px-2 text-gray-400 font-semibold hover:text-purple-400 transition duration-300">Home</router-link>
                     <router-link :to="{ name: 'tools' }"
+                        activeClass="border-b-4 border-purple-400"
                         class="py-4 px-2 text-gray-400 font-semibold hover:text-purple-400 transition duration-300">Tools</router-link>
-                    <a href=""
+                    <a href="https://github.com/JStruk/UtilsNinja"
+                        target="_blank"
+                        rel="noopener noreferrer"
                         class="py-4 px-2 text-gray-400 font-semibold hover:text-purple-400 transition duration-300">Contribute</a>
-                    <a href=""
+                    <a href="#contact"
                         class="py-4 px-2 text-gray-400 font-semibold hover:text-purple-400 transition duration-300">Contact</a>
                 </div>
                 <!-- Mobile menu button -->
@@ -31,13 +36,19 @@
             </div>
         </div>
         <!-- mobile menu -->
-        <div class="mobile-menu" v-if="!collapsed">
+        <div class="mobile-menu" v-show="!collapsed">
             <ul class="">
-                <li class="active"><a href="index.html"
-                        class="block text-sm px-2 py-4 text-white bg-purple-400 font-semibold">Home</a></li>
-                <li><a href="#home"
-                        class="block text-sm px-2 py-4 hover:bg-purple-400 transition duration-300">Tools</a></li>
-                <li><a href="#about"
+                <li><router-link :to="{ name: 'home' }"
+                        @click="toggleMenu"
+                        activeClass="bg-purple-400 text-white font-semibold"
+                        class="block text-sm px-2 py-4 hover:bg-purple-400 transition duration-300">Home</router-link></li>
+                <li><router-link :to="{ name: 'tools' }"
+                        @click="toggleMenu"
+                        activeClass="bg-purple-400 text-white font-semibold"
+                        class="block text-sm px-2 py-4 hover:bg-purple-400 transition duration-300">Tools</router-link></li>
+                <li><a href="https://github.com/JStruk/UtilsNinja"
+                        target="_blank"
+                        rel="noopener noreferrer"
                         class="block text-sm px-2 py-4 hover:bg-purple-400 transition duration-300">Contribute</a></li>
                 <li><a href="#contact"
                         class="block text-sm px-2 py-4 hover:bg-purple-400 transition duration-300">Contact</a></li>