mirror of
https://github.com/MaggieAppleton/digital-gardeners.git
synced 2024-11-02 09:12:15 +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() {
|
||||
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>
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue