From 8fd6f1a2739b686092bbb5806666e63f283d6510 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Mon, 22 Jan 2024 19:56:50 -0500
Subject: Add Vue.JS for Navbar; Transitions; Getting started on projects

---
 src/components/Navbar.astro | 23 -----------------------
 src/components/Navbar.vue   | 30 ++++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 23 deletions(-)
 delete mode 100644 src/components/Navbar.astro
 create mode 100644 src/components/Navbar.vue

(limited to 'src/components')

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
deleted file mode 100644
index bd372e5..0000000
--- a/src/components/Navbar.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import "../styles/Navbar.css"
----
-<nav>
-    <button class="nav-toggle" aria-label="toggle navigation">
-        <span class='hamburger'></span>
-    </button>
-    <ul class="nav-list">
-        <li><a href="/" class="nav-link">Home</a></li>
-        <li><a href="/projects" class="nav-link">Projects</a></li>
-        <li><a href="/downloads" class="nav-link">Downloads</a></li>
-        <li><a href="/blog" class="nav-link">Blog</a></li>
-        <li><a href="/guestbook" class="nav-link">Guestbook</a></li>
-        <li><a href="/contacts" class="nav-link">Contacts</a></li>
-    </ul>
-</nav>
-
-<script>
-    document.querySelector('.nav-toggle').addEventListener('click', function() {
-        this.classList.toggle('active');
-        document.querySelector('.nav-list').classList.toggle('show');
-    });
-</script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..9767cfb
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,30 @@
+<template>
+  <nav>
+    <button class="nav-toggle" aria-label="toggle navigation" @click="toggleNav">
+      <span class='hamburger'></span>
+    </button>
+    <ul class="nav-list">
+      <li><a href="/" class="nav-link" @click="toggleNav">Home</a></li>
+      <li><a href="/projects" class="nav-link" @click="toggleNav">Projects</a></li>
+      <li><a href="/downloads" class="nav-link" @click="toggleNav">Downloads</a></li>
+      <li><a href="/blog" class="nav-link" @click="toggleNav">Blog</a></li>
+      <li><a href="/guestbook" class="nav-link" @click="toggleNav">Guestbook</a></li>
+      <li><a href="/contacts" class="nav-link" @click="toggleNav">Contacts</a></li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleNav() {
+      document.querySelector('.nav-toggle').classList.toggle('active');
+      document.querySelector('.nav-list').classList.toggle('show');
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import "../styles/Navbar.css";
+</style>
-- 
cgit v1.2.3