From 5721add857efbada8a24c0379f32098d3ed4b81d Mon Sep 17 00:00:00 2001
From: Maggie Appleton <maggie.fm.appleton@gmail.com>
Date: Fri, 10 Sep 2021 10:22:45 +0100
Subject: [PATCH] refactored side menu

---
 components/Sidemenu.js | 98 ++++++++++++++++++++++++------------------
 pages/_app.js          | 14 ++++--
 pages/index.js         |  4 +-
 tailwind.config.js     |  9 ++--
 4 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/components/Sidemenu.js b/components/Sidemenu.js
index bbb191b..c0a642b 100644
--- a/components/Sidemenu.js
+++ b/components/Sidemenu.js
@@ -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>
+);
diff --git a/pages/_app.js b/pages/_app.js
index 4979a44..c87803e 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,7 +1,13 @@
-import '../styles/tailwind.css'
+import "../styles/tailwind.css";
+import Sidemenu from "../components/Sidemenu";
 
-function MyApp({Component, pageProps}) {
-    return <Component {...pageProps} />
+function MyApp({ Component, pageProps }) {
+    return (
+        <div className="flex flex-row">
+            <Sidemenu />
+            <Component {...pageProps} />
+        </div>
+    );
 }
 
-export default MyApp;
\ No newline at end of file
+export default MyApp;
diff --git a/pages/index.js b/pages/index.js
index 91663fe..04a3e0d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -4,7 +4,6 @@ import Link from "next/link";
 import path from "path";
 import Container from "../components/Container";
 import Layout from "../components/Layout";
-import Sidemenu from "../components/Sidemenu";
 import Card from "../components/Card";
 import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
 import { motion } from "framer-motion";
@@ -31,7 +30,6 @@ const tools = [
 export default function Index({ gardens }) {
     return (
         <Container>
-            <Sidemenu />
             <Layout>
                 <motion.div
                     initial="hidden"
@@ -49,7 +47,7 @@ export default function Index({ gardens }) {
                         },
                     }}
                 >
-                    <h1 className="sm:text-4xl  mb-6 font-semibold">
+                    <h1 className="sm:text-4xl text-black mb-6 font-semibold">
                         Garden of Digital Gardens
                     </h1>
                     <h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight">
diff --git a/tailwind.config.js b/tailwind.config.js
index e54a1b9..3bc1363 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
         extend: {
             fontFamily: {
                 sans: ["Poppins", ...defaultTheme.fontFamily.sans],
-                serif: ["Source Serif Pro", ...defaultTheme.fontFamily.mono],
+                serif: ["Source Serif Pro", ...defaultTheme.fontFamily.serif],
             },
             fontSize: {
                 // Set in Perfect Fourth typescale (1.33)
@@ -25,10 +25,11 @@ module.exports = {
             },
             colors: {
                 ...colors,
+                brightGreen: "#189191",
                 deepGreen: "#136464",
-                offWhite: "#F7F7F5",
-                black: "#2B2B2B",
-                lightBlack: "#3F433E",
+                offWhite: "#F5F4EF",
+                black: "#373435",
+                lightBlack: "#514B4C",
                 orangeRed: "#FF6148",
             },
         },