109 lines
3.8 KiB
Text
109 lines
3.8 KiB
Text
---
|
|
import navbarPages from "../data/navbarPages.json";
|
|
---
|
|
|
|
<div>
|
|
<div class="bg-white flex justify-between items-center">
|
|
<div class="h-20 flex items-center p-2 z-10 w-auto scale-[85%]">
|
|
<img src="logos/ieeelogo_full.png" class="h-14" alt="IEEE Logo" />
|
|
</div>
|
|
<nav class="xl:block items-center px-6 hidden">
|
|
<ul>
|
|
{
|
|
navbarPages.map((page) => (
|
|
<a
|
|
href={page.url}
|
|
class=" font-extrabold text-ieee hover:text-gray-300 px-3 py-2 rounded-md text-2xl"
|
|
>
|
|
{page.name}
|
|
</a>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<nav
|
|
class="xl:hidden absolute top-[75px] w-full bg-white overflow-y-hidden transition-all duration-500 -translate-y-full z-0"
|
|
style="height: calc(100vh - 75px);"
|
|
id="secondNav"
|
|
>
|
|
<ul
|
|
class="block text-center mt-[80px] mx-auto mb-0 my-auto w-fit"
|
|
id="navbar-list"
|
|
>
|
|
{
|
|
navbarPages.map((page) => (
|
|
<a
|
|
href={page.url}
|
|
class=" block font-extrabold text-2xl text-ieee hover:text-gray-300 pb-10 rounded-md opacity-0"
|
|
>
|
|
{page.name}
|
|
</a>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<div class="xl:hidden z-5 mr-2 z-10">
|
|
<button
|
|
class="hamburger hamburger--collapse flex bg-white p-0 m-0"
|
|
color="#FFFFFF"
|
|
type="button"
|
|
>
|
|
<span class="hamburger-box">
|
|
<span class="hamburger-inner"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var hamburger = document.querySelector(".hamburger") as HTMLButtonElement;
|
|
var secondNav = document.querySelector("#secondNav");
|
|
var navbarListItems = document.querySelectorAll("#navbar-list a");
|
|
|
|
if (hamburger && secondNav && navbarListItems) {
|
|
hamburger.addEventListener("click", function () {
|
|
hamburger.disabled = true;
|
|
|
|
hamburger.classList.toggle("is-active");
|
|
|
|
if (secondNav.classList.contains("-translate-y-full")) {
|
|
secondNav.classList.remove("-translate-y-full");
|
|
secondNav.classList.add("translate-y-0");
|
|
|
|
let lastItemIndex = navbarListItems.length - 1;
|
|
|
|
navbarListItems.forEach((item, index) => {
|
|
setTimeout(
|
|
() => {
|
|
let htmlItem = item as HTMLElement;
|
|
htmlItem.style.transition = "opacity 0.5s ease";
|
|
htmlItem.style.opacity = "1";
|
|
|
|
if (index === lastItemIndex) {
|
|
setTimeout(() => {
|
|
hamburger.disabled = false;
|
|
}, 500);
|
|
}
|
|
},
|
|
500 + index * 100
|
|
);
|
|
});
|
|
} else {
|
|
navbarListItems.forEach((item, index) => {
|
|
let htmlItem = item as HTMLElement;
|
|
htmlItem.style.opacity = "0";
|
|
});
|
|
|
|
setTimeout(() => {
|
|
secondNav.classList.remove("translate-y-0");
|
|
secondNav.classList.add("-translate-y-full");
|
|
|
|
setTimeout(() => {
|
|
hamburger.disabled = false;
|
|
}, 500);
|
|
}, 500);
|
|
}
|
|
});
|
|
}
|
|
</script>
|