BasegBot/InvestWeb
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init ranking w/ fake data (redesign later)

Browse source
This commit is contained in:
3zachm 2022-12-22 08:23:04 -08:00
parent eb8a85893d
commit e0e3e744f3
4 changed files with 387 additions and 48 deletions
components/dashboard
NavBar.tsx

99
components/dashboard/NavBar.tsx
View file

@ -1,38 +1,54 @@
import { m, Variants } from "framer-motion";
import { useRouter } from "next/router";
import Link from "next/link";
function NavBar() {
return (
<m.div
className="mr-2 flex h-24 w-full flex-row items-center justify-between bg-zinc-800 p-1 lg:h-screen lg:w-24 lg:flex-col"
variants={navContainerVariants}
initial="initial"
animate="animate"
>
<div className="m-3">
<m.div
className="flex flex-row pl-5 lg:flex-col lg:pl-0 lg:pt-5"
variants={navStripVariants}
className="flex min-h-[5rem] w-full flex-row items-center justify-between rounded-2xl bg-zinc-800 p-1 lg:h-full lg:w-24 lg:flex-col"
variants={navContainerVariants}
initial="initial"
animate="animate"
>
<m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-5">
<Link href="/dashboard">
<DashIcon />
</Link>
<m.div
className="flex flex-row items-center justify-center pl-5 lg:flex-col lg:pl-0 lg:pt-5"
variants={navStripVariants}
>
<m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-3">
<ActiveLink href="/dashboard">
<DashIcon />
</ActiveLink>
</m.div>
<m.div
variants={navIconVariants}
className="pr-5 lg:pr-0 lg:pt-3 lg:pb-3"
>
<ActiveLink href="/dashboard/ranking">
<RankingIcon />
</ActiveLink>
</m.div>
</m.div>
<m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-5">
<Link href="/dashboard/ranking">
<RankingIcon />
</Link>
<m.div
className="flex flex-row items-center justify-center pr-5 lg:w-full lg:flex-col lg:pr-0 lg:pb-5"
variants={navStripVariants}
>
<m.div
className="fill-white stroke-white"
whileHover={{
color: "#fca311",
}}
whileTap={{
color: "#dd4444",
}}
>
<Link href="/">
<ExitIcon />
</Link>
</m.div>
</m.div>
</m.div>
<m.div
className="flex flex-row items-center justify-center pr-5 lg:w-full lg:flex-col lg:pr-0 lg:pb-5"
variants={navStripVariants}
>
<Link href="/">
<ExitIcon />
</Link>
</m.div>
</m.div>
</div>
);
}
@ -46,6 +62,12 @@ const NavSvgWrap = (props: { children: React.ReactNode }) => {
x={0}
y={0}
origin="center"
whileHover={{
scale: 1.1,
}}
whileTap={{
scale: 0.9,
}}
>
{props.children}
</m.svg>
@ -57,9 +79,9 @@ const DashIcon = () => {
<NavSvgWrap>
<m.path
d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"
fill="white"
stroke="white"
strokeWidth="1"
stroke="currentColor"
fill="currentColor"
/>
</NavSvgWrap>
);
@ -70,9 +92,9 @@ const ExitIcon = () => {
<NavSvgWrap>
<m.path
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
fill="white"
stroke="white"
strokeWidth="1"
stroke="currentColor"
fill="currentColor"
/>
</NavSvgWrap>
);
@ -83,14 +105,29 @@ const RankingIcon = () => {
<NavSvgWrap>
<m.path
d="M7.5 21H2V9h5.5v12zm7.25-18h-5.5v18h5.5V3zM22 11h-5.5v10H22V11z"
fill="white"
stroke="white"
strokeWidth="1"
stroke="currentColor"
fill="currentColor"
/>
</NavSvgWrap>
);
};
const ActiveLink = (props: { href: string; children: React.ReactNode }) => {
const router = useRouter();
let styling = "text-white";
console.log(router.pathname);
console.log(props.href);
if (router.pathname === props.href) {
styling = "text-[#a855f7]";
}
return (
<Link href={props.href} className={styling}>
{props.children}
</Link>
);
};
const navContainerVariants: Variants = {
initial: {
opacity: 0,