ruidy/orbital-orbit
1
0
Fork 0
mirror of https://github.com/rjNemo/orbital-orbit synced 2026-06-06 06:56:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add interactivity with script

Browse source
This commit is contained in:
Ruidy 2024-12-31 09:50:17 +01:00
parent 7e01b7e81f
commit 628e4d955e
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
5 changed files with 30 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Hamburger.astro Normal file
View file

@ -0,0 +1,5 @@
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>

2
src/components/Header.astro
View file

@ -1,7 +1,9 @@
---
import Hamburger from "./Hamburger.astro";
import Navigation from "./Navigation.astro";
---
<header>
<Hamburger />
<Navigation />
</header>

5
src/pages/index.astro
View file

@ -19,5 +19,8 @@ const pageTitle = "Orbital Orbit"
<h1>{pageTitle}</h1>
<Footer/>
</body>
<script>
import "../scripts/menu.js"
</script>
</body>
</html>

3
src/scripts/menu.js Normal file
View file

@ -0,0 +1,3 @@
document.querySelector(".hamburger")?.addEventListener("click", () => {
document.querySelector(".nav-links")?.classList.toggle("expanded");
});

16
src/styles/global.css
View file

@ -21,6 +21,18 @@ h1 {
}
/* nav styles */
.hamburger {
padding-right: 20px;
cursor: pointer;
}
.hamburger .line {
display: block;
width: 40px;
height: 5px;
margin-bottom: 10px;
background-color: #ff9776;
}
.nav-links {
width: 100%;
@ -63,4 +75,8 @@ h1 {
display: inline-block;
padding: 15px 20px;
}
.hamburger {
display: none;
}
}