diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 4844131..b02602e 100644
--- a/src/components/Menu.tsx
+++ b/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]) => (
-
- {name}
-
- ));
+ const menuItems = Object.entries(MENU).map(([name, link]) => {
+ const active = location.split("/")[1] === link.split("/")[1];
+
+ return (
+
+ {name}
+
+ );
+ });
return (
-
+
{notmobile
? menuItems
diff --git a/src/pages/blog/Home.tsx b/src/pages/blog/Home.tsx
index c326d4b..ce3a79a 100644
--- a/src/pages/blog/Home.tsx
+++ b/src/pages/blog/Home.tsx
@@ -58,8 +58,7 @@ const Header: React.FC = () => {
};
const BlogHome: React.FC = () => {
- const [location] = useLocation();
- const navigate = useNav();
+ const [location, navigate] = useNav();
const isArticleOpen = Boolean(location.split("/blog")[1]);
const [isAsideClosed, setAsideClosed] = useState(isArticleOpen);
diff --git a/src/pages/blog/components/BlogContent.tsx b/src/pages/blog/components/BlogContent.tsx
index 626b8df..ff3a4a8 100644
--- a/src/pages/blog/components/BlogContent.tsx
+++ b/src/pages/blog/components/BlogContent.tsx
@@ -112,8 +112,7 @@ const btn = css`
`;
export const BlogPost: React.FC = () => {
- const navigate = useNav();
- const [location] = useLocation();
+ const [location, navigate] = useNav();
const [content, setContent] = useState("");
const [error, setError] = useState("");
const [loading, setLoading] = useState(true);
diff --git a/src/pages/main/404.tsx b/src/pages/main/404.tsx
index 0d884a6..199db3b 100644
--- a/src/pages/main/404.tsx
+++ b/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 (
diff --git a/src/pages/main/Projects.tsx b/src/pages/main/Projects.tsx
index 8bb8522..3317c95 100644
--- a/src/pages/main/Projects.tsx
+++ b/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"],
diff --git a/src/util/index.ts b/src/util/index.ts
index fe8ce04..5e13520 100644
--- a/src/util/index.ts
+++ b/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) => {
- e?.preventDefault();
- if (e.ctrlKey) return window.open(link, "_blank", "noreferrer noopener");
- navigate(link);
- };
+ 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) {