feat: current menu link style

src/components/Menu.tsx

@@ -43,6 +43,15 @@ const menuList = css`
 	align-items: center;
 	font-weight: 800;
 
+	& a.active {
+		color: var(--primary-colour);
+		/* text-decoration: underline; */
+	}
+
+	& a:hover {
+		text-decoration: underline;
+	}
+
 	& > li {
 		margin-left: 1rem;
 	}
@@ -68,16 +77,24 @@ const Menu: React.FC<{
 	show?: boolean;
 	setShowMenu: (show: boolean) => void;
 }> = ({ show = false, setShowMenu }) => {
-	const navigate = useNav();
+	const [location, navigate] = useNav();
 	// use same query as elsewhere for consistency
 	const mobile = useMediaQuery("(max-width: 50rem)");
 	const notmobile = !mobile;
 
-	const menuItems = Object.entries(MENU).map(([name, link]) => (
+	const menuItems = Object.entries(MENU).map(([name, link]) => {
-		<a key={link} onClick={navigate(link)} href={link}>
+		const active = location.split("/")[1] === link.split("/")[1];
+
+		return (
+			<a
+				className={cx({ active })}
+				key={link}
+				onClick={navigate(link)}
+				href={link}>
 				{name}
 			</a>
-	));
+		);
+	});
 
 	return (
 		<motion.div
@@ -89,7 +106,7 @@ const Menu: React.FC<{
 				// only children need to animate on desktop, lock opacity: 1
 				opacity: notmobile ? 1 : show ? 1 : 0,
 			}}>
-			<ul className={notmobile ? menuList : cx(menuList, mobileMenu)}>
+			<ul className={cx(menuList, !notmobile && mobileMenu)}>
 				<RevealChildren type="li" show={show}>
 					{notmobile
 						? menuItems

src/pages/blog/Home.tsx

@@ -58,8 +58,7 @@ const Header: React.FC = () => {
 };
 
 const BlogHome: React.FC = () => {
-	const [location] = useLocation();
+	const [location, navigate] = useNav();
-	const navigate = useNav();
 
 	const isArticleOpen = Boolean(location.split("/blog")[1]);
 	const [isAsideClosed, setAsideClosed] = useState(isArticleOpen);

src/pages/blog/components/BlogContent.tsx

@@ -112,8 +112,7 @@ const btn = css`
 `;
 
 export const BlogPost: React.FC = () => {
-	const navigate = useNav();
+	const [location, navigate] = useNav();
-	const [location] = useLocation();
 	const [content, setContent] = useState("");
 	const [error, setError] = useState("");
 	const [loading, setLoading] = useState(true);

src/pages/main/404.tsx

@@ -3,7 +3,7 @@ import Container from "../../components/Container";
 import { useNav } from "../../util";
 
 function Home() {
-	const navigate = useNav();
+	const [, navigate] = useNav();
 
 	return (
 		<Container>

src/pages/main/Projects.tsx

@@ -50,7 +50,7 @@ const exp = [
 	{
 		title: "Storymap",
 		description:
-			"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️.",
+			"Reverse-engineered thirdparty map renderer for Vintage Story in Zig ⚡️",
 		// url: "https://github.com/MadrasMC/storymap",
 		cat: "tool",
 		tags: ["vintage-story", "zig"],

src/util/index.ts

@@ -21,13 +21,16 @@ export const ellipses = (text: string, length: number = 100) =>
 	text.length > length ? text.slice(0, length - 3) + "..." : text;
 
 export const useNav = () => {
-	const [, navigate] = useLocation();
+	const [location, navigate] = useLocation();
 
-	return (link: string) => (e: React.MouseEvent | KeyboardEvent) => {
+	return [
+		location,
+		(link: string) => (e: React.MouseEvent | KeyboardEvent) => {
 			e?.preventDefault();
 			if (e.ctrlKey) return window.open(link, "_blank", "noreferrer noopener");
 			navigate(link);
-	};
+		},
+	] as const;
 };
 
 export function rewriteExtn(filename: string, extn: string) {