refactored side menu

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

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>
);

View file

@ -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;
export default MyApp;

View file

@ -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">

View file

@ -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",
},
},