diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-02-03 15:48:11 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-02-03 15:58:10 -0500 |
| commit | 4c84e203859be34da582f51371adc6eeb370b518 (patch) | |
| tree | 2f0e43dfa49da41141277fb35881e9eff51c6adb /src/components | |
| parent | 0077087a5179c2ffdec07ee38f3ffbbb01853dde (diff) | |
| download | personal-website-4c84e203859be34da582f51371adc6eeb370b518.tar.gz personal-website-4c84e203859be34da582f51371adc6eeb370b518.tar.bz2 personal-website-4c84e203859be34da582f51371adc6eeb370b518.zip | |
Navbar now uses preact instead
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Navbar.jsx | 29 | ||||
| -rw-r--r-- | src/components/Navbar.vue | 30 |
2 files changed, 29 insertions, 30 deletions
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx new file mode 100644 index 0000000..cda6b67 --- /dev/null +++ b/src/components/Navbar.jsx @@ -0,0 +1,29 @@ +import { Component } from 'preact'; +import '../styles/Navbar.css'; + +class Navbar extends Component { + toggleNav = () => { + document.querySelector('.nav-toggle').classList.toggle('active'); + document.querySelector('.nav-list').classList.toggle('show'); + } + + render() { + return ( + <nav> + <button class="nav-toggle" aria-label="toggle navigation" onClick={this.toggleNav}> + <span class='hamburger'></span> + </button> + <ul class="nav-list"> + <li><a href="/" class="nav-link" onClick={this.toggleNav}>Home</a></li> + <li><a href="/projects" class="nav-link" onClick={this.toggleNav}>Projects</a></li> + <li><a href="/blog" class="nav-link" onClick={this.toggleNav}>Blog</a></li> + <li><a href="/guestbook" class="nav-link" onClick={this.toggleNav}>Guestbook</a></li> + <li><a href="https://archive.alee14.me" class="nav-link" onClick={this.toggleNav}>Archive</a></li> + <li><a href="/contacts" class="nav-link" onClick={this.toggleNav}>Contacts</a></li> + </ul> + </nav> + ); + } +} + +export default Navbar;
\ No newline at end of file diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue deleted file mode 100644 index 3ff5d5e..0000000 --- a/src/components/Navbar.vue +++ /dev/null @@ -1,30 +0,0 @@ -<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="/blog" class="nav-link" @click="toggleNav">Blog</a></li> - <li><a href="/guestbook" class="nav-link" @click="toggleNav">Guestbook</a></li> - <li><a href="https://archive.alee14.me" class="nav-link" @click="toggleNav">Archive</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> |