1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 07:38:29 -04:00
Jake Jarvis 41d2b8c64b
scss ➡️ vanilla css (#727)
* scss isn't worth the technical/mental overhead anymore

* try to translate my old Hugo pygments themes

* update lockfile

* consolidate .hljs classes
2022-01-07 16:17:14 -05:00

51 lines
1.2 KiB
TypeScript

import dynamic from "next/dynamic";
import Link from "next/link";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.css";
// ensure the theme toggle isn't evaluated server-side
const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
const links = [
{
icon: <HomeIcon className={`icon ${styles.icon}`} />,
text: "Home",
href: "/",
},
{
icon: <NotesIcon className={`icon ${styles.icon}`} />,
text: "Notes",
href: "/notes/",
},
{
icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
text: "Projects",
href: "/projects/",
},
{
icon: <ContactIcon className={`icon ${styles.icon}`} />,
text: "Contact",
href: "/contact/",
},
];
const Menu = () => (
<ul className={styles.menu}>
{links.map((link, index) => (
<li key={index} className={styles.item}>
<Link href={link.href} prefetch={false}>
<a className={styles.link}>
{link.icon} <span className={styles.text}>{link.text}</span>
</a>
</Link>
</li>
))}
<li className={`${styles.item} ${styles.theme_toggle}`}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
export default Menu;