Navbar now uses preact instead

1 files changed, 29 insertions, 0 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