From fd1d608df8544873f8f8325e0507db1c59723549 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Fri, 28 Jun 2024 20:49:32 -0400
Subject: Converted navbar to svelte

---
 src/components/Navbar.jsx    |  29 -----------
 src/components/Navbar.svelte | 115 +++++++++++++++++++++++++++++++++++++++++++
 src/layouts/Default.astro    |   2 +-
 src/styles/Navbar.css        |  90 ---------------------------------
 4 files changed, 116 insertions(+), 120 deletions(-)
 delete mode 100644 src/components/Navbar.jsx
 create mode 100644 src/components/Navbar.svelte
 delete mode 100644 src/styles/Navbar.css

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
deleted file mode 100644
index f76a5f2..0000000
--- a/src/components/Navbar.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-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;
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
new file mode 100644
index 0000000..9ceca5b
--- /dev/null
+++ b/src/components/Navbar.svelte
@@ -0,0 +1,115 @@
+<script>
+    let active = false;
+
+    const toggleNav = () => {
+        active = !active;
+    };
+</script>
+
+<style>
+    nav {
+        font-weight: 300;
+        padding-top: 1.5em;
+        padding-bottom: 2.2em;
+    }
+    ul.nav-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 2.2em;
+    }
+
+    a.nav-link {
+        font-size: 1.1em;
+    }
+
+    a.nav-link:hover {
+        color: #9ECD9D;
+        transition: ease-in-out 0.1s;
+    }
+
+    a.nav-link:active {
+        color: #609460;
+    }
+
+    .nav-toggle {
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        display: none;
+    }
+
+    .nav-toggle .hamburger {
+        width: 30px;
+        height: 2px;
+        background: white;
+        display: block;
+        position: relative;
+    }
+
+    .nav-toggle .hamburger::before, .nav-toggle .hamburger::after {
+        content: '';
+        background: white;
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    .nav-toggle .hamburger::before {
+        top: -10px;
+    }
+
+    .nav-toggle .hamburger::after {
+        bottom: -10px;
+    }
+
+    @media (max-width: 768px) {
+        .nav-toggle {
+            display: block;
+            padding: 20px;
+        }
+
+        ul.nav-list {
+            flex-direction: column;
+            align-items: center;
+            gap: 1em;
+            display: none;
+        }
+
+        ul.nav-list.show {
+            display: flex;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        .nav-list.show a.nav-link {
+            animation: fadeIn 0.5s ease-in-out forwards;
+        }
+    }
+
+</style>
+
+<nav>
+    <button class="nav-toggle" aria-label="toggle navigation" on:click={toggleNav}>
+        <span class='hamburger'></span>
+    </button>
+    <ul class={active ? 'nav-list show' : 'nav-list'}>
+        <li><a href="/" class="nav-link" on:click={toggleNav}>Home</a></li>
+        <li><a href="/projects" class="nav-link" on:click={toggleNav}>Projects</a></li>
+        <li><a href="/blog" class="nav-link" on:click={toggleNav}>Blog</a></li>
+        <li><a href="/guestbook" class="nav-link" on:click={toggleNav}>Guestbook</a></li>
+        <li><a href="https://archive.alee14.me" class="nav-link" on:click={toggleNav}>Archive</a></li>
+        <li><a href="/contacts" class="nav-link" on:click={toggleNav}>Contacts</a></li>
+    </ul>
+</nav>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 775c94c..81619c6 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -6,7 +6,7 @@ interface Props {
 
 const { title = "Andrew Lee", description = "Andrew Lee Website" } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
-import Navbar from '../components/Navbar.jsx';
+import Navbar from '../components/Navbar.svelte';
 const date = new Date();
 ---
 
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
deleted file mode 100644
index 78711d2..0000000
--- a/src/styles/Navbar.css
+++ /dev/null
@@ -1,90 +0,0 @@
-nav {
-    font-weight: 300;
-    padding-top: 1.5em;
-    padding-bottom: 2.2em;
-}
-ul.nav-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 2.2em;
-}
-
-a.nav-link {
-    font-size: 1.1em;
-}
-
-a.nav-link:hover {
-    color: #9ECD9D;
-    transition: ease-in-out 0.1s;
-}
-
-a.nav-link:active {
-    color: #609460;
-}
-
-.nav-toggle {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: none;
-}
-
-.nav-toggle .hamburger {
-    width: 30px;
-    height: 2px;
-    background: white;
-    display: block;
-    position: relative;
-}
-
-.nav-toggle .hamburger::before, .nav-toggle .hamburger::after {
-    content: '';
-    background: white;
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.nav-toggle .hamburger::before {
-    top: -10px;
-}
-
-.nav-toggle .hamburger::after {
-    bottom: -10px;
-}
-
-@media (max-width: 768px) {
-    .nav-toggle {
-        display: block;
-        padding: 20px;
-    }
-
-    ul.nav-list {
-        flex-direction: column;
-        align-items: center;
-        gap: 1em;
-        display: none;
-    }
-
-    ul.nav-list.show {
-        display: flex;
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-
-    .nav-list.show a.nav-link {
-        animation: fadeIn 0.5s ease-in-out forwards;
-    }
-}
-- 
cgit v1.2.3