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

updated coloring of the button

Browse source
This commit is contained in:
chark1es 2025-03-08 15:09:14 -08:00
parent 790bea36b9
commit 5a114c3a76
1 changed files with 353 additions and 368 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/core/Navbar.astro
View file

@ -51,14 +51,14 @@ import pages from "../../data/pages.json";
href={page.path} href={page.path}
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
${ ${
page.name === "Online Store" page.name === "Dashboard"
? "bg-ieee-yellow text-black hover:opacity-70" ? "bg-ieee-yellow text-black hover:opacity-70"
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light" : "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
}`} }`}
> >
{page.name} {page.name}
</a> </a>
) ),
) )
} }
</div> </div>
@ -152,14 +152,14 @@ import pages from "../../data/pages.json";
href={page.path} href={page.path}
class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md class={`block py-4 px-12 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-2xl w-full max-w-md
${ ${
page.name === "Online Store" page.name === "Dashboard"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]" ? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white hover:text-gray-300 border-white border-2" : "text-white hover:text-gray-300 border-white border-2"
}`} }`}
> >
{page.name} {page.name}
</a> </a>
) ),
) )
} }
</div> </div>
@ -282,9 +282,7 @@ import pages from "../../data/pages.json";
const mobileMenu = document.getElementById("mobile-menu"); const mobileMenu = document.getElementById("mobile-menu");
const menuIcon = document.querySelector(".menu-icon"); const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close-icon"); const closeIcon = document.querySelector(".close-icon");
const dropdownToggles = document.querySelectorAll( const dropdownToggles = document.querySelectorAll(".mobile-dropdown-toggle");
".mobile-dropdown-toggle"
);
function toggleMenu(show: boolean) { function toggleMenu(show: boolean) {
if (show) { if (show) {
@ -307,17 +305,10 @@ import pages from "../../data/pages.json";
mobileMenu?.classList.add("hidden"); mobileMenu?.classList.add("hidden");
// Then reset all dropdowns and focus states // Then reset all dropdowns and focus states
document document.querySelectorAll(".dropdown-container").forEach((el) => {
.querySelectorAll(".dropdown-container") const dropdownContent = el.querySelector(".mobile-dropdown-content");
.forEach((el) => { const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
const dropdownContent = el.querySelector( const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
".mobile-dropdown-content"
);
const dropdownToggle = el.querySelector(
".mobile-dropdown-toggle"
);
const dropdownIcon =
dropdownToggle?.querySelector(".dropdown-icon");
el.classList.remove("active"); el.classList.remove("active");
dropdownContent?.classList.remove("show"); dropdownContent?.classList.remove("show");
@ -339,8 +330,7 @@ import pages from "../../data/pages.json";
toggle.addEventListener("click", (e) => { toggle.addEventListener("click", (e) => {
e.stopPropagation(); e.stopPropagation();
const container = toggle.closest(".dropdown-container"); const container = toggle.closest(".dropdown-container");
const content = toggle.parentElement const content = toggle.parentElement?.nextElementSibling as HTMLElement;
?.nextElementSibling as HTMLElement;
const icon = toggle.querySelector(".dropdown-icon"); const icon = toggle.querySelector(".dropdown-icon");
const isExpanded = toggle.getAttribute("aria-expanded") === "true"; const isExpanded = toggle.getAttribute("aria-expanded") === "true";
@ -361,14 +351,9 @@ import pages from "../../data/pages.json";
// Remove active state from all dropdowns first // Remove active state from all dropdowns first
document.querySelectorAll(".dropdown-container").forEach((el) => { document.querySelectorAll(".dropdown-container").forEach((el) => {
const dropdownContent = el.querySelector( const dropdownContent = el.querySelector(".mobile-dropdown-content");
".mobile-dropdown-content" const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
); const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
const dropdownToggle = el.querySelector(
".mobile-dropdown-toggle"
);
const dropdownIcon =
dropdownToggle?.querySelector(".dropdown-icon");
dropdownContent?.classList.remove("show"); dropdownContent?.classList.remove("show");
dropdownIcon?.classList.remove("rotated"); dropdownIcon?.classList.remove("rotated");