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() { export default function Sidemenu() {
return ( return (
<motion.div <motion.div className="flex flex-col space-y-3 mt-28 ml-6 w-52 mr-12">
initial="hidden" {[
animate="visible" { name: leafSVG, path: "/" },
variants={{
hidden: { opacity: 0, x: -50 }, {
visible: { name: "What's a Digital Garden?",
opacity: 1, path: "/what",
x: 0, style: "font-bold",
transition: {
delay: 0.6,
ease: "easeInOut",
duration: 1,
},
}, },
}} { name: "Directory", path: "/directory" },
className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12 text-deepGreen" { name: "Tools", path: "/tools" },
> { name: "Tutorials and Guides", path: "/tutorials" },
<Link href="/what"> { name: "Theory, Philosophy, & Navel-Gazing", path: "/theory" },
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold"> ].map((item, index) => (
What's a Digital Garden? <Link href={item.path} key={index}>
</a> <motion.a
</Link> initial="hidden"
<Link href="/directory"> animate="visible"
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight"> variants={{
Garden Directory hidden: {
</a> opacity: 0,
</Link> x: -100,
<Link href="/tools"> },
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight"> visible: {
Tools for Gardening opacity: 1,
</a> x: 0,
</Link> transition: {
<Link href="/tutorials"> delay: 0.2 * index,
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight"> ease: "easeInOut",
Gardening Tutorials and Guides duration: 0.6,
</a> },
</Link> },
<Link href="/theory"> }}
<a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight"> className={`flex flex-col space-y-1 text-deepGreen hover:text-brightGreen duration-200 ease-in cursor-pointer ${
Gardening Theory and Navel-Gazing item.style && item.style
</a> }`}
</Link> >
{item.name}
</motion.a>
</Link>
))}
</motion.div> </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}) { function MyApp({ Component, pageProps }) {
return <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 path from "path";
import Container from "../components/Container"; import Container from "../components/Container";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
import Sidemenu from "../components/Sidemenu";
import Card from "../components/Card"; import Card from "../components/Card";
import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils"; import { gardenFilePath, GARDENS_PATH } from "../utils/mdxUtils";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
@ -31,7 +30,6 @@ const tools = [
export default function Index({ gardens }) { export default function Index({ gardens }) {
return ( return (
<Container> <Container>
<Sidemenu />
<Layout> <Layout>
<motion.div <motion.div
initial="hidden" 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 Garden of Digital Gardens
</h1> </h1>
<h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight"> <h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight">

View file

@ -11,7 +11,7 @@ module.exports = {
extend: { extend: {
fontFamily: { fontFamily: {
sans: ["Poppins", ...defaultTheme.fontFamily.sans], sans: ["Poppins", ...defaultTheme.fontFamily.sans],
serif: ["Source Serif Pro", ...defaultTheme.fontFamily.mono], serif: ["Source Serif Pro", ...defaultTheme.fontFamily.serif],
}, },
fontSize: { fontSize: {
// Set in Perfect Fourth typescale (1.33) // Set in Perfect Fourth typescale (1.33)
@ -25,10 +25,11 @@ module.exports = {
}, },
colors: { colors: {
...colors, ...colors,
brightGreen: "#189191",
deepGreen: "#136464", deepGreen: "#136464",
offWhite: "#F7F7F5", offWhite: "#F5F4EF",
black: "#2B2B2B", black: "#373435",
lightBlack: "#3F433E", lightBlack: "#514B4C",
orangeRed: "#FF6148", orangeRed: "#FF6148",
}, },
}, },