jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-14 16:15:28 -04:00
Code Issues Activity

less corny header and note meta icons (#746)

Browse Source 
* less corny header and note meta icons

* swap out more twemojis

* indicate active page in nav bar

* update favicons

* extract `<MenuLink />` into its own component

* change hover effect to an underline

* cropped header photo
This commit is contained in:
Jake Jarvis
2022-01-27 10:06:26 -05:00
committed by GitHub
parent f1e2917b08
commit 283eb62446
38 changed files with 193 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Menu/Menu.tsx
+26 -24
View File
@@ -1,6 +1,7 @@
import { memo } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import classNames from "classnames";
import MenuLink from "../MenuLink/MenuLink";
import ThemeToggle from "../ThemeToggle/ThemeToggle";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";
@@ -12,43 +13,44 @@ type Props = {
const links = [
{
icon: <HomeIcon className={classNames("icon", styles.icon)} />,
icon: <HomeIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
text: "Home",
href: "/",
},
{
icon: <NotesIcon className={classNames("icon", styles.icon)} />,
icon: <NotesIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
text: "Notes",
href: "/notes/",
href: "/notes",
},
{
icon: <ProjectsIcon className={classNames("icon", styles.icon)} />,
icon: <ProjectsIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
text: "Projects",
href: "/projects/",
href: "/projects",
},
{
icon: <ContactIcon className={classNames("icon", styles.icon)} />,
icon: <ContactIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
text: "Contact",
href: "/contact/",
href: "/contact",
},
];
const Menu = ({ className }: Props) => (
<ul className={classNames(styles.menu, className)}>
{links.map((link, index) => (
<li key={index} className={styles.menu_item}>
<Link href={link.href} prefetch={false}>
<a className={styles.link}>
{link.icon} <span className={styles.label}>{link.text}</span>
</a>
</Link>
</li>
))}
const Menu = ({ className }: Props) => {
const router = useRouter();
<li className={classNames(styles.theme_toggle, styles.menu_item)}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
return (
<ul className={classNames(styles.menu, className)}>
{links.map((link, index) => (
<li key={index} className={styles.menu_item}>
{/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
<MenuLink {...link} current={link.href === `/${router.pathname.split("/")[1]}`} />
</li>
))}
<li className={styles.menu_item}>
<ThemeToggle className={styles.icon} />
</li>
</ul>
);
};
export default memo(Menu);