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> </ul>
</nav> </nav>
<nav <nav
class="xl:hidden absolute top-[80px] w-full bg-black overflow-y-hidden transition-all duration-500 -translate-y-full z-0" 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 - 80px);" style="height: calc(100vh - 75px);"
id="secondNav" id="secondNav"
> >
<ul <ul
@ -57,36 +57,51 @@ import navbarPages from "../data/navbarPages.json";
</div> </div>
<script> <script>
var hamburger = document.querySelector(".hamburger"); var hamburger = document.querySelector(".hamburger") as HTMLButtonElement;
var secondNav = document.querySelector("#secondNav"); var secondNav = document.querySelector("#secondNav");
var navbarListItems = document.querySelectorAll("#navbar-list a"); var navbarListItems = document.querySelectorAll("#navbar-list a");
if (hamburger && secondNav && navbarListItems) { if (hamburger && secondNav && navbarListItems) {
hamburger.addEventListener("click", function () { hamburger.addEventListener("click", function () {
hamburger.disabled = true;
hamburger.classList.toggle("is-active"); hamburger.classList.toggle("is-active");
if (secondNav.classList.contains("-translate-y-full")) { if (secondNav.classList.contains("-translate-y-full")) {
secondNav.classList.remove("-translate-y-full"); secondNav.classList.remove("-translate-y-full");
secondNav.classList.add("translate-y-0"); secondNav.classList.add("translate-y-0");
let lastItemIndex = navbarListItems.length - 1;
navbarListItems.forEach((item, index) => { navbarListItems.forEach((item, index) => {
setTimeout( setTimeout(
() => { () => {
let htmlItem = item as HTMLElement; let htmlItem = item as HTMLElement;
htmlItem.style.transition = "opacity 0.5s ease"; htmlItem.style.transition = "opacity 0.5s ease";
htmlItem.style.opacity = "1"; htmlItem.style.opacity = "1";
if (index === lastItemIndex) {
setTimeout(() => {
hamburger.disabled = false;
}, 500);
}
}, },
500 + index * 100 500 + index * 100
); );
}); });
} else { } else {
navbarListItems.forEach((item) => { navbarListItems.forEach((item, index) => {
let htmlItem = item as HTMLElement; let htmlItem = item as HTMLElement;
htmlItem.style.opacity = "0"; htmlItem.style.opacity = "0";
}); });
setTimeout(() => { setTimeout(() => {
secondNav.classList.remove("translate-y-0"); secondNav.classList.remove("translate-y-0");
secondNav.classList.add("-translate-y-full"); secondNav.classList.add("-translate-y-full");
setTimeout(() => {
hamburger.disabled = false;
}, 500);
}, 500); }, 500);
} }
}); });