From 1bf530a6ccd6fb4d9e911739ca78315df3f4d428 Mon Sep 17 00:00:00 2001 From: 3zachm <3zachm2@gmail.com> Date: Sat, 10 Dec 2022 03:04:52 -0800 Subject: [PATCH] NavBar responsive init --- components/common/NavBar.tsx | 102 +++++++++++++++++++++++++---------- 1 file changed, 75 insertions(+), 27 deletions(-) diff --git a/components/common/NavBar.tsx b/components/common/NavBar.tsx index aab2666..e524e45 100644 --- a/components/common/NavBar.tsx +++ b/components/common/NavBar.tsx @@ -37,6 +37,7 @@ const itemAnimation: Variants = { function NavBar({ options }: NavProps) { const [navList, setNavList] = useState(options); + const [active, setActive] = useState(false); return ( <m.div className="pointer-events-none fixed inline-grid w-screen grid-cols-2 p-2 pt-7 font-plusJakarta text-2xl sm:p-7 lg:grid-cols-3" @@ -44,26 +45,30 @@ function NavBar({ options }: NavProps) { animate="animate" variants={containerAnimation} > - <m.div className="mr-auto" variants={itemAnimation}> - <Link - key="InvestBot" - href="/" - className="flex flex-row items-center justify-center" + <m.div + className="mr-auto flex flex-row items-center justify-center" + variants={itemAnimation} + > + <m.div + className="ml-4 mr-4 sm:m-0" + initial={{ + scale: 1, + rotate: 0, + }} + animate={{ + scale: 1, + rotate: 360, + transition: { + duration: 4, + type: "spring", + stiffness: 20, + }, + }} > - <m.div - initial={{ - scale: 1, - rotate: 0, - }} - animate={{ - scale: 1, - rotate: 360, - transition: { - duration: 4, - type: "spring", - stiffness: 20, - }, - }} + <Link + key="InvestBotImg" + href="/" + className="pointer-events-auto flex flex-row items-center justify-center" > <Image src="/img/logo.webp" @@ -72,14 +77,45 @@ function NavBar({ options }: NavProps) { height={64} className="mr-8 rounded-b-full" /> - </m.div> - <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-5 font-plusJakarta text-white"> - <p>InvestBot</p> - <p className="text-xs text-gray-400"> - Serving anny's community est. 2022 - </p> - </div> - </Link> + </Link> + </m.div> + <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-5 font-plusJakarta text-white"> + <Link + key="InvestBot" + href="/" + className="hidden flex-row items-center justify-center sm:flex" + > + InvestBot + </Link> + <h1 className="flex flex-row items-center justify-center sm:hidden"> + InvestBot + </h1> + <p className="hidden text-xs text-gray-400 sm:block"> + Serving anny's community est. 2022 + </p> + </div> + <m.svg + className="pointer-events-auto cursor-pointer lg:hidden" + origin="center" + width="25" + height="26" + viewBox="0 0 330 330" + x={0} + y={0} + animate={{ rotate: active ? 180 : 0 }} + onClick={() => { + setActive(!active); + console.log(active); + }} + > + <m.path + d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z" + fill="white" + stroke="white" + strokeWidth="15" + strokeLinecap="round" + /> + </m.svg> </m.div> <m.div className="mr-auto ml-auto hidden flex-row items-center justify-center lg:flex" @@ -98,6 +134,18 @@ function NavBar({ options }: NavProps) { </p> <div className="h-10 w-10 rounded-full bg-white"></div> </m.div> + <m.div + // hiddden by default, when active is true, animate in + className="pointer-events-auto z-10 mt-5 bg-zinc-800 md:max-w-[75%] lg:hidden" + initial={{ opacity: 0 }} + animate={{ opacity: active ? 1 : 0 }} + transition={{ duration: 0.5 }} + > + {navList.map((nav, index) => ( + // TODO: stylize -- I have a flight in 4 hours and its 3:04 am + <Fragment key={index}>{nav.content}</Fragment> + ))} + </m.div> </m.div> ); }