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

responsive navbar

Browse source
This commit is contained in:
chark1es 2024-01-21 02:09:47 -08:00
parent 23f70a942a
commit ad47737555
3 changed files with 66 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/Navbar.astro
View file

@ -3,17 +3,17 @@ import navbarPages from "../data/navbarPages.json";
---
<div>
<div class="bg-black flex justify-between items-center p-2">
<div class="h-20 flex items-center">
<img src="logos/ieeelogo_full.png" class="h-16" alt="IEEE Logo" />
<div class="bg-black 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="2xl:flex items-center px-6 hidden">
<nav class="xl:block items-center px-6 hidden">
<ul>
{
navbarPages.map((page) => (
<a
href={page.url}
class="text-white hover:text-gray-300 px-3 py-2 rounded-md text-xl"
class="font-extrabold text-ieee hover:text-gray-300 px-3 py-2 rounded-md text-xl"
>
{page.name}
</a>
@ -21,7 +21,28 @@ import navbarPages from "../data/navbarPages.json";
}
</ul>
</nav>
<div class="2xl:hidden z-5 mr-2">
<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);"
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-xl 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"
@ -36,17 +57,38 @@ import navbarPages from "../data/navbarPages.json";
</div>
<script>
// Look for .hamburger
var hamburger = document.querySelector(".hamburger");
// Check if hamburger element exists
if (hamburger) {
// On click
var secondNav = document.querySelector("#secondNav");
var navbarListItems = document.querySelectorAll("#navbar-list a");
if (hamburger && secondNav && navbarListItems) {
hamburger.addEventListener("click", function () {
// Toggle class "is-active"
if (hamburger) {
hamburger.classList.toggle("is-active");
hamburger.classList.toggle("is-active");
if (secondNav.classList.contains("-translate-y-full")) {
secondNav.classList.remove("-translate-y-full");
secondNav.classList.add("translate-y-0");
navbarListItems.forEach((item, index) => {
setTimeout(
() => {
let htmlItem = item as HTMLElement;
htmlItem.style.transition = "opacity 0.5s ease";
htmlItem.style.opacity = "1";
},
500 + index * 100
);
});
} else {
navbarListItems.forEach((item) => {
let htmlItem = item as HTMLElement;
htmlItem.style.opacity = "0";
});
setTimeout(() => {
secondNav.classList.remove("translate-y-0");
secondNav.classList.add("-translate-y-full");
}, 500);
}
// Do something else, like open/close menu
});
}
</script>

12
src/data/navbarPages.json
View file

@ -1,22 +1,22 @@
[
{
"name": "Home",
"name": "HOME",
"url": "/"
},
{
"name": "Events",
"name": "EVENTS",
"url": "/events"
},
{
"name": "Projects",
"name": "PROJECTS",
"url": "/projects"
},
{
"name": "Committees",
"name": "COMMITTEES",
"url": "/committees"
},
{
"name": "Contact Us",
"url": "/contactus"
"name": "CONTACT US",
"url": "/contact"
}
]

4
tsconfig.json
View file

@ -1,3 +1,5 @@
{
"extends": "astro/tsconfigs/strict"
"compilerOptions": {
"allowSyntheticDefaultImports": true
}
}