111 lines
3.1 KiB
Plaintext
111 lines
3.1 KiB
Plaintext
---
|
|
import logo from "/src/assets/lume-logo.png";
|
|
const { view } = Astro.props;
|
|
|
|
function getActiveClass(linkView) {
|
|
return view === linkView ? "border-b border-white" : "";
|
|
}
|
|
---
|
|
|
|
<nav class="flex flex-row px-[25px] justify-between items-center py-8 md:p-14">
|
|
<div class="logo">
|
|
<!-- TODO: Hide this logo and show simplified when 320 > width -->
|
|
<a href="/">
|
|
<img class="w-44" src={logo.src} alt="Lume Logo" />
|
|
</a>
|
|
</div>
|
|
<menu
|
|
class="hidden flex-col items-center gap-14 z-20 max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
|
|
>
|
|
<li>
|
|
<a href="/" class={getActiveClass("home")}>Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/vision" class={getActiveClass("vision")}>Vision</a>
|
|
</li>
|
|
<li>
|
|
<a href="/what-is-web3" class={getActiveClass("what")}>What is Web3</a>
|
|
</li>
|
|
<li>
|
|
<a href="/donate" class={getActiveClass("donate")}>Donate</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="https://web3extension.io"
|
|
class="text-md rounded-md bg-primary py-3 px-10 mt-14 text-[black] font-body"
|
|
>Download Extension</a
|
|
>
|
|
</li>
|
|
</menu>
|
|
<div
|
|
id="navbar-overlay"
|
|
class="hidden lg:hidden bg-black/40 w-screen h-screen fixed z-10 top-0 botton-0 right-0 left-0"
|
|
>
|
|
</div>
|
|
<button id="hamburger" class="z-30 text-4xl lg:hidden">
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 52 43"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1 1.06787H51.295"
|
|
stroke="white"
|
|
stroke-width="1.28"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
<path
|
|
d="M1 21.5728H51.295"
|
|
stroke="white"
|
|
stroke-width="1.28"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
<path
|
|
d="M1 42.0776H51.295"
|
|
stroke="white"
|
|
stroke-width="1.28"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
</svg>
|
|
</button>
|
|
<script>
|
|
const navbarOverlayEl = document.getElementById("navbar-overlay");
|
|
const hamburgerEl = document.getElementById("hamburger");
|
|
const menuEl = document.querySelector("menu");
|
|
|
|
function toggleScrollBlock() {
|
|
// When not hidden, should block scroll
|
|
if (!navbarOverlayEl.classList.contains("hidden")) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = null;
|
|
}
|
|
}
|
|
|
|
function handleMenuClick() {
|
|
// Toggle menu open/closed
|
|
["hidden", "flex"].forEach((className) => {
|
|
menuEl.classList.toggle(className);
|
|
});
|
|
|
|
navbarOverlayEl.classList.toggle("hidden");
|
|
toggleScrollBlock();
|
|
}
|
|
|
|
function handleOverlayClick() {
|
|
// Close menu on overlay click
|
|
["hidden", "flex"].forEach((className) => {
|
|
menuEl.classList.toggle(className);
|
|
});
|
|
|
|
navbarOverlayEl.classList.toggle("hidden");
|
|
toggleScrollBlock();
|
|
}
|
|
|
|
hamburgerEl.addEventListener("click", handleMenuClick);
|
|
navbarOverlayEl.addEventListener("click", handleOverlayClick);
|
|
</script>
|
|
</nav>
|