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}
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"
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
}`}
>
{page.name}
</a>
)
),
)
}
</div>
@ -152,14 +152,14 @@ import pages from "../../data/pages.json";
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
${
page.name === "Online Store"
page.name === "Dashboard"
? "bg-[#f3c135] text-black border-[#f3c135] hover:bg-[#dba923] hover:border-[#dba923]"
: "text-white hover:text-gray-300 border-white border-2"
}`}
>
{page.name}
</a>
)
),
)
}
</div>
@ -282,9 +282,7 @@ import pages from "../../data/pages.json";
const mobileMenu = document.getElementById("mobile-menu");
const menuIcon = document.querySelector(".menu-icon");
const closeIcon = document.querySelector(".close-icon");
const dropdownToggles = document.querySelectorAll(
".mobile-dropdown-toggle"
);
const dropdownToggles = document.querySelectorAll(".mobile-dropdown-toggle");
function toggleMenu(show: boolean) {
if (show) {
@ -307,17 +305,10 @@ import pages from "../../data/pages.json";
mobileMenu?.classList.add("hidden");
// Then reset all dropdowns and focus states
document
.querySelectorAll(".dropdown-container")
.forEach((el) => {
const dropdownContent = el.querySelector(
".mobile-dropdown-content"
);
const dropdownToggle = el.querySelector(
".mobile-dropdown-toggle"
);
const dropdownIcon =
dropdownToggle?.querySelector(".dropdown-icon");
document.querySelectorAll(".dropdown-container").forEach((el) => {
const dropdownContent = el.querySelector(".mobile-dropdown-content");
const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
el.classList.remove("active");
dropdownContent?.classList.remove("show");
@ -339,8 +330,7 @@ import pages from "../../data/pages.json";
toggle.addEventListener("click", (e) => {
e.stopPropagation();
const container = toggle.closest(".dropdown-container");
const content = toggle.parentElement
?.nextElementSibling as HTMLElement;
const content = toggle.parentElement?.nextElementSibling as HTMLElement;
const icon = toggle.querySelector(".dropdown-icon");
const isExpanded = toggle.getAttribute("aria-expanded") === "true";
@ -361,14 +351,9 @@ import pages from "../../data/pages.json";
// Remove active state from all dropdowns first
document.querySelectorAll(".dropdown-container").forEach((el) => {
const dropdownContent = el.querySelector(
".mobile-dropdown-content"
);
const dropdownToggle = el.querySelector(
".mobile-dropdown-toggle"
);
const dropdownIcon =
dropdownToggle?.querySelector(".dropdown-icon");
const dropdownContent = el.querySelector(".mobile-dropdown-content");
const dropdownToggle = el.querySelector(".mobile-dropdown-toggle");
const dropdownIcon = dropdownToggle?.querySelector(".dropdown-icon");
dropdownContent?.classList.remove("show");
dropdownIcon?.classList.remove("rotated");