fix import errors and animation

This commit is contained in:
chark1es 2024-12-21 15:35:40 -08:00
parent 8d034ed451
commit 3c5e1bcc04

View file

@ -1,6 +1,6 @@
--- ---
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import whiteLogoHorizontal from "./public/logos/white_logo_horizontal.svg"; import whiteLogoHorizontal from "../../../public/logos/white_logo_horizontal.svg";
import pages from "../../data/pages.json"; import pages from "../../data/pages.json";
--- ---
@ -76,18 +76,18 @@ import pages from "../../data/pages.json";
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div <div
id="mobile-menu" id="mobile-menu"
class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden transition-transform duration-300 transform translate-x-full" class="fixed inset-0 bg-nav_bg bg-opacity-95 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
> >
<div class="flex flex-col items-center justify-center h-full space-y-6"> <div class="flex flex-col items-center justify-center h-full space-y-6">
{ {
pages.map((page) => ( pages.map((page) => (
<a <a
href={page.path} href={page.path}
class={`block py-2 px-8 text-center rounded-[3rem] transition-colors duration-200 uppercase font-bold text-xl class={`block py-2 px-8 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-xl
${ ${
page.name === "Online Store" page.name === "Online Store"
? "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" : "text-white hover:text-gray-300 border-white"
}`} }`}
> >
{page.name} {page.name}
@ -100,7 +100,7 @@ import pages from "../../data/pages.json";
<style> <style>
#mobile-menu.show { #mobile-menu.show {
transform: translateX(0); @apply translate-x-0;
} }
</style> </style>
@ -128,7 +128,7 @@ import pages from "../../data/pages.json";
setTimeout(() => { setTimeout(() => {
mobileMenu?.classList.add("hidden"); mobileMenu?.classList.add("hidden");
}, 300); }, 100);
} }
} }