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

fix navbar mobile view

Browse source
This commit is contained in:
chark1es 2025-01-27 10:27:33 -08:00
parent 9c114fb1db
commit 821d929428
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,8 +8,17 @@ import pages from "../../data/pages.json";
<div <div
class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]" class="flex justify-between items-center bg-black my-[1%] mx-[2.5%] py-[0.5%] px-[1%] md:rounded-full md:border-[0.1vw]"
> >
<a href="/" class="hover:opacity-60 duration-300 hidden md:flex"> <a href="/" class="hover:opacity-60 duration-300">
<Image class="w-[15vw]" src={whiteLogoHorizontal} alt="IEEE UCSD Logo" /> <Image
class="w-[15vw] md:block hidden"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
<Image
class="w-[40vw] md:hidden block"
src={whiteLogoHorizontal}
alt="IEEE UCSD Logo"
/>
</a> </a>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
@ -71,16 +80,18 @@ import pages from "../../data/pages.json";
id="mobile-menu" id="mobile-menu"
class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full" class="fixed inset-0 z-[51] hidden xl:hidden motion-safe:transition-transform motion-safe:duration-300 translate-x-full"
> >
<div class="flex flex-col items-center h-[70vh] justify-evenly bg-black"> <div
class="flex flex-col items-center min-h-screen justify-center bg-black py-20 px-4 space-y-8"
>
{ {
pages.map((page) => ( pages.map((page) => (
<a <a
href={page.path} href={page.path}
class={`block py-2 px-8 text-center rounded-[3rem] motion-safe:transition-colors motion-safe:duration-200 uppercase font-bold text-xl 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 === "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 border-2"
}`} }`}
> >
{page.name} {page.name}