jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:46:39 -04:00
Code Issues Activity

re-add next-remote-watch as local dev server

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-16 14:25:27 -05:00
parent 416eb4b4cf
commit 147128516e
6 changed files with 550 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/Menu/Menu.tsx
View File

@ -1,8 +1,8 @@
import { memo } from "react";
import { useRouter } from "next/router";
import classNames from "classnames";
import MenuLink from "../MenuLink/MenuLink";
import { menuLinks } from "../../lib/config/menu";
import MenuItem from "../MenuItem/MenuItem";
import { menuItems } from "../../lib/config/menu";
import styles from "./Menu.module.css";
@ -15,10 +15,10 @@ const Menu = ({ className }: MenuProps) => {
return (
<ul className={classNames(styles.menu, className)}>
{menuLinks.map((link, index) => (
{menuItems.map((item, index) => (
<li key={index} className={styles.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]}`} />
<MenuItem {...item} current={item.href === `/${router.pathname.split("/")[1]}`} />
</li>
))}
</ul>

0
components/MenuLink/MenuLink.module.css → components/MenuItem/MenuItem.module.css
View File

20
components/MenuLink/MenuLink.tsx → components/MenuItem/MenuItem.tsx
View File

@ -1,9 +1,9 @@
import Link from "next/link";
import classNames from "classnames";
import styles from "./MenuLink.module.css";
import styles from "./MenuItem.module.css";
export type MenuLinkProps = {
export type MenuItemProps = {
href?: string;
text?: string;
current?: boolean;
@ -14,19 +14,23 @@ export type MenuLinkProps = {
icon: any;
};
const MenuLink = ({ icon: Icon, href, text, current, className }: MenuLinkProps) => {
const MenuItem = ({ icon: Icon, href, text, current, className }: MenuItemProps) => {
const linkContent = (
<>
<Icon className={classNames(styles.icon, className)} /> {text && <span className={styles.label}>{text}</span>}
</>
);
// allow both navigational links and/or other interactive react components (e.g. the theme toggle)
if (href) {
return (
<Link href={href} prefetch={false}>
<a className={classNames(styles.link, current && styles.current, className)}>
<Icon className={styles.icon} /> <span className={styles.label}>{text}</span>
</a>
<a className={classNames(styles.link, current && styles.current, className)}>{linkContent}</a>
</Link>
);
} else {
return <Icon className={classNames(styles.icon, className)} />;
return linkContent;
}
};
export default MenuLink;
export default MenuItem;