diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Navbar.jsx | 29 | ||||
| -rw-r--r-- | src/components/Navbar.svelte | 115 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 2 | ||||
| -rw-r--r-- | src/styles/Navbar.css | 90 |
4 files changed, 116 insertions, 120 deletions
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; - } -} |