digital-gardeners/components/Sidemenu.js
Maggie Appleton 6792dabecb initial setup
2021-09-05 15:37:21 +01:00

51 lines
2 KiB
JavaScript

import { motion } from "framer-motion";
import Link from "next/link";
export default function Sidemenu() {
return (
<motion.div
initial="hidden"
animate="visible"
variants={{
hidden: { opacity: 0, x: -50 },
visible: {
opacity: 1,
x: 0,
transition: {
delay: 0.6,
ease: "easeInOut",
duration: 1,
},
},
}}
className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12"
>
<Link href="/what">
<a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold">
What's a Digital Garden?
</a>
</Link>
<Link href="/directory">
<a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Garden Directory
</a>
</Link>
<Link href="/tools">
<a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Tools for Gardening
</a>
</Link>
<Link href="/tutorials">
<a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Gardening Tutorials and Guides
</a>
</Link>
<Link href="/theory">
<a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Gardening Theory and Navel-Gazing
</a>
</Link>
</motion.div>
);
}