fabian/digital-gardeners
1
0
Fork 0
mirror of https://github.com/MaggieAppleton/digital-gardeners.git synced 2025-11-15 04:40:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

refactored side menu

Browse source
This commit is contained in:
Maggie Appleton 2021-09-10 10:22:45 +01:00
parent cc24e63ade
commit 5721add857
4 changed files with 73 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

98
components/Sidemenu.js
View file

@ -3,48 +3,64 @@ 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,
},
<motion.div className="flex flex-col space-y-3 mt-28 ml-6 w-52 mr-12">
{[
{ name: leafSVG, path: "/" },
{
name: "What's a Digital Garden?",
path: "/what",
style: "font-bold",
},
}}
className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12 text-deepGreen"
>
<Link href="/what">
<a className="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-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Garden Directory
</a>
</Link>
<Link href="/tools">
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Tools for Gardening
</a>
</Link>
<Link href="/tutorials">
<a className="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-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
Gardening Theory and Navel-Gazing
</a>
</Link>
{ name: "Directory", path: "/directory" },
{ name: "Tools", path: "/tools" },
{ name: "Tutorials and Guides", path: "/tutorials" },
{ name: "Theory, Philosophy, & Navel-Gazing", path: "/theory" },
].map((item, index) => (
<Link href={item.path} key={index}>
<motion.a
initial="hidden"
animate="visible"
variants={{
hidden: {
opacity: 0,
x: -100,
},
visible: {
opacity: 1,
x: 0,
transition: {
delay: 0.2 * index,
ease: "easeInOut",
duration: 0.6,
},
},
}}
className={`flex flex-col space-y-1 text-deepGreen hover:text-brightGreen duration-200 ease-in cursor-pointer ${
item.style && item.style
}`}
>
{item.name}
</motion.a>
</Link>
))}
</motion.div>
);
}
const leafSVG = (
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
/>
</svg>
);