72 lines
2.1 KiB
Plaintext
72 lines
2.1 KiB
Plaintext
---
|
|
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="/src/assets/lume-logo.png" alt="Lume Logo" />
|
|
</a>
|
|
</div>
|
|
<menu
|
|
class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black 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="#"
|
|
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">☰</button>
|
|
<script>
|
|
const navbarOverlayEl = document.getElementById("navbar-overlay");
|
|
const hamburgerEl = document.getElementById("hamburger");
|
|
const menuEl = document.querySelector("menu");
|
|
|
|
function handleMenuClick() {
|
|
// Toggle menu open/closed
|
|
["hidden", "flex"].forEach((className) => {
|
|
menuEl.classList.toggle(className);
|
|
});
|
|
|
|
navbarOverlayEl.classList.toggle("hidden");
|
|
}
|
|
|
|
function handleOverlayClick() {
|
|
// Close menu on overlay click
|
|
["hidden", "flex"].forEach((className) => {
|
|
menuEl.classList.toggle(className);
|
|
});
|
|
|
|
navbarOverlayEl.classList.toggle("hidden");
|
|
}
|
|
|
|
hamburgerEl.addEventListener("click", handleMenuClick);
|
|
navbarOverlayEl.addEventListener("click", handleOverlayClick);
|
|
</script>
|
|
</nav>
|