diff options
| author | Andrew Lee <alee14498@protonmail.com> | 2024-01-20 00:31:03 -0500 |
|---|---|---|
| committer | Andrew Lee <alee14498@protonmail.com> | 2024-01-20 00:31:03 -0500 |
| commit | 84df8d3ccb2b5e40f8a5a90ecd71e0ab463483be (patch) | |
| tree | 9bbefc8254a9a8681ba46a98b959e940b34364be /src/components/Navbar.astro | |
| parent | 57965c763f38db0b7f48cae40169e52274a936cb (diff) | |
| download | personal-website-84df8d3ccb2b5e40f8a5a90ecd71e0ab463483be.tar.gz personal-website-84df8d3ccb2b5e40f8a5a90ecd71e0ab463483be.tar.bz2 personal-website-84df8d3ccb2b5e40f8a5a90ecd71e0ab463483be.zip | |
Navbar responsive design; Now using grid instead of flexbox
Diffstat (limited to 'src/components/Navbar.astro')
| -rw-r--r-- | src/components/Navbar.astro | 10 |
1 files changed, 10 insertions, 0 deletions
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index c9deb28..03bc27c 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -2,6 +2,9 @@ import "../styles/Navbar.css" --- <nav> + <button class="nav-toggle" aria-label="toggle navigation"> + <span class='hamburger'></span> + </button> <ul class="nav-list"> <li><a href="/" class="nav-link">Home</a></li> <li><a href="#" class="nav-link">Projects</a></li> @@ -11,3 +14,10 @@ import "../styles/Navbar.css" <li><a href="#" class="nav-link">Contacts</a></li> </ul> </nav> + +<script> + document.querySelector('.nav-toggle').addEventListener('click', function() { + this.classList.toggle('active'); + document.querySelector('.nav-list').classList.toggle('show'); + }); +</script> |