148 lines
3 KiB
TypeScript
148 lines
3 KiB
TypeScript
import { m, Variants } from "framer-motion";
|
|
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"
|
|
>
|
|
<m.div
|
|
className="flex flex-row 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-5">
|
|
<Link href="/dashboard">
|
|
<DashIcon />
|
|
</Link>
|
|
</m.div>
|
|
<m.div variants={navIconVariants} className="pr-5 lg:pr-0 lg:pb-5">
|
|
<Link href="/dashboard/ranking">
|
|
<RankingIcon />
|
|
</Link>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
const NavSvgWrap = (props: { children: React.ReactNode }) => {
|
|
return (
|
|
<m.svg
|
|
className="cursor-pointer"
|
|
viewBox="0 0 24 24"
|
|
width="32"
|
|
height="32"
|
|
x={0}
|
|
y={0}
|
|
origin="center"
|
|
>
|
|
{props.children}
|
|
</m.svg>
|
|
);
|
|
};
|
|
|
|
const DashIcon = () => {
|
|
return (
|
|
<NavSvgWrap>
|
|
<m.path
|
|
d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"
|
|
fill="white"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
/>
|
|
</NavSvgWrap>
|
|
);
|
|
};
|
|
|
|
const ExitIcon = () => {
|
|
return (
|
|
<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"
|
|
/>
|
|
</NavSvgWrap>
|
|
);
|
|
};
|
|
|
|
const RankingIcon = () => {
|
|
return (
|
|
<NavSvgWrap>
|
|
<m.path
|
|
d="M7.5 21H2V9h5.5v12zm7.25-18h-5.5v18h5.5V3zM22 11h-5.5v10H22V11z"
|
|
fill="white"
|
|
stroke="white"
|
|
strokeWidth="1"
|
|
/>
|
|
</NavSvgWrap>
|
|
);
|
|
};
|
|
|
|
const navContainerVariants: Variants = {
|
|
initial: {
|
|
opacity: 0,
|
|
x: -100,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
x: 0,
|
|
transition: {
|
|
delay: 0.5,
|
|
duration: 1.0,
|
|
type: "spring",
|
|
bounce: 0.5,
|
|
stiffness: 80,
|
|
delayChildren: 1.25,
|
|
staggerChildren: 0.25,
|
|
},
|
|
},
|
|
};
|
|
|
|
const navStripVariants: Variants = {
|
|
initial: {
|
|
opacity: 0,
|
|
y: 100,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 1.0,
|
|
type: "spring",
|
|
bounce: 0.5,
|
|
stiffness: 80,
|
|
staggerChildren: 0.25,
|
|
delayChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const navIconVariants: Variants = {
|
|
initial: {
|
|
opacity: 0,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
transition: {
|
|
duration: 1.0,
|
|
type: "spring",
|
|
bounce: 0.5,
|
|
stiffness: 80,
|
|
},
|
|
},
|
|
};
|
|
|
|
export default NavBar;
|