diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-01-22 19:56:50 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-01-22 20:53:41 -0500 |
| commit | 8fd6f1a2739b686092bbb5806666e63f283d6510 (patch) | |
| tree | e378cd080f8f6882e0282e9db6a6b0c48030049b /src/components/Navbar.vue | |
| parent | 7604592b7a68fee231b63ff5123837e3eb1beaf8 (diff) | |
| download | personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.gz personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.bz2 personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.zip | |
Add Vue.JS for Navbar; Transitions; Getting started on projects
Diffstat (limited to 'src/components/Navbar.vue')
| -rw-r--r-- | src/components/Navbar.vue | 30 |
1 files changed, 30 insertions, 0 deletions
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> |