Webmaster/old2-ieeeucsd-org
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed navbar bugs

Browse source 
- fixed a bug where the animation is broken when a person spams the hamburger icon
- fixed a display bug where the mobile navbar shows a white line / gap when the dropdown is shown.
This commit is contained in:
chark1es 2024-01-22 02:11:10 -08:00
parent ad47737555
commit db09aac9e5
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/Navbar.astro
View file

@ -22,8 +22,8 @@ import navbarPages from "../data/navbarPages.json";
</ul>
</nav>
<nav
class="xl:hidden absolute top-[80px] w-full bg-black overflow-y-hidden transition-all duration-500 -translate-y-full z-0"
style="height: calc(100vh - 80px);"
class="xl:hidden absolute top-[75px] w-full bg-black overflow-y-hidden transition-all duration-500 -translate-y-full z-0"
style="height: calc(100vh - 75px);"
id="secondNav"
>
<ul
@ -57,36 +57,51 @@ import navbarPages from "../data/navbarPages.json";
</div>
<script>
var hamburger = document.querySelector(".hamburger");
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) => {
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);
}
});