mirror of
https://github.com/MaggieAppleton/digital-gardeners.git
synced 2025-01-02 16:31:06 +01:00
refactored side menu
This commit is contained in:
parent
cc24e63ade
commit
5721add857
|
@ -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>
|
||||||
|
);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue