From 8ec1c4146b73df0d573968db7e1580a8b12b0a3e Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Tue, 3 Oct 2023 02:23:51 +0530
Subject: [PATCH] feat: kb navigation

---
 src/components/Container.tsx | 126 +++++++++++++++++++++++++------------------
 src/components/Menu.tsx      |  16 +++---
 src/pages/main/Contact.tsx   |   2 -
 src/pages/main/Exp.tsx       |   2 +-
 src/pages/main/Home.tsx      |   2 +-
 src/pages/main/Projects.tsx  |   2 +-
 6 files changed, 87 insertions(+), 63 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 59b8961..46dd3c6 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -4,8 +4,8 @@ import useLocation from "wouter/use-location";
 
 import { ReactComponent as Logo } from "../assets/logo.svg";
 import { ReactComponent as Right } from "../assets/arrow-right.svg";
-import { getTimeout } from "../util";
-import Menu from "./Menu";
+import { get, getTimeout } from "../util";
+import Menu, { MenuEntries } from "./Menu";
 import useMediaQuery from "../util/useMediaQuery";
 
 const [timer, clear] = getTimeout();
@@ -17,18 +17,9 @@ const Container: React.FC<{
 		| React.ReactElement
 	)[];
 	hideNav?: boolean;
-	end?: boolean;
-	next?: string;
 	className?: string;
-}> = ({
-	children: _children,
-	hideNav = false,
-	end = false,
-	next,
-	className,
-	...props
-}) => {
-	const [, navigate] = useLocation();
+}> = ({ children: _children, hideNav = false, className, ...props }) => {
+	const [location, navigate] = useLocation();
 
 	const mobile = useMediaQuery("(max-width: 50rem)");
 
@@ -116,10 +107,9 @@ const Container: React.FC<{
 		return () => window.removeEventListener("resize", handleResize);
 	}, []);
 
-	// on first render
-	useLayoutEffect(handleResize, []);
+	type MouseKb = React.MouseEvent | React.KeyboardEvent | KeyboardEvent;
 
-	const handleNext: React.MouseEventHandler<HTMLButtonElement> = e => {
+	const animateArrow = (e: MouseKb) => {
 		if (containerChild.current) {
 			(
 				[...containerChild.current.children] as (HTMLElement | SVGElement)[]
@@ -130,10 +120,46 @@ const Container: React.FC<{
 		}
 		document.body.style.maxHeight = "100vh";
 		document.body.style.overflow = "hidden";
-		e.currentTarget.style.width = "0";
+		try {
+			const target = e.currentTarget! as HTMLButtonElement;
+			target.style.width = "0";
+		} catch {}
+	};
+
+	const current = MenuEntries.findIndex(([, path]) => location === path);
+	const next = get.next(MenuEntries, current)[1];
+	const prev = get.prev(MenuEntries, current)[1];
+	const end = current === MenuEntries.length - 1;
+
+	const handlePrev = (e: MouseKb) => {
+		animateArrow(e);
+		timer(() => prev && navigate(prev), 300);
+	};
+
+	const handleNext = (e: MouseKb) => {
+		animateArrow(e);
 		timer(() => next && navigate(next), 300);
 	};
 
+	function kbnav(e: KeyboardEvent) {
+		switch (e.key) {
+			case "ArrowLeft":
+				return handlePrev(e);
+			case "ArrowRight":
+				return handleNext(e);
+		}
+	}
+
+	useEffect(() => {
+		window.addEventListener("keydown", kbnav);
+
+		// cleanup
+		return () => window.removeEventListener("keydown", kbnav);
+	}, []);
+
+	// on first render
+	useLayoutEffect(handleResize, []);
+
 	return (
 		<div
 			className={css`
@@ -247,41 +273,39 @@ const Container: React.FC<{
 					<Menu show={showMenu} setShowMenu={setShowMenu} />
 				</span>
 			)}
-			{next && (
-				<button
-					onClick={handleNext}
-					ref={nextBtn}
-					title={end ? "Back to start" : "Next page"}
+			<button
+				onClick={handleNext}
+				ref={nextBtn}
+				title={end ? "Back to start" : "Next page"}
+				className={css`
+					position: fixed;
+					right: 14vw;
+					bottom: 10vh;
+					z-index: 500;
+					background: none;
+					padding: 0;
+					font-weight: 500;
+					cursor: pointer;
+					letter-spacing: 0.2rem;
+					border: none;
+					overflow: hidden;
+					width: 0;
+					transition: all 300ms;
+					overflow: hidden;
+
+					${end ? "rotate: 180deg;" : ""}
+
+					&:hover * {
+						fill: var(--primary-colour);
+					}
+				`}>
+				<Right
 					className={css`
-						position: fixed;
-						right: 14vw;
-						bottom: 10vh;
-						z-index: 500;
-						background: none;
-						padding: 0;
-						font-weight: 500;
-						cursor: pointer;
-						letter-spacing: 0.2rem;
-						border: none;
-						overflow: hidden;
-						width: 0;
-						transition: all 300ms;
-						overflow: hidden;
-
-						${end ? "rotate: 180deg;" : ""}
-
-						&:hover * {
-							fill: var(--primary-colour);
-						}
-					`}>
-					<Right
-						className={css`
-							height: "2rem";
-							width: "2rem";
-						`}
-					/>
-				</button>
-			)}
+						height: "2rem";
+						width: "2rem";
+					`}
+				/>
+			</button>
 			<div
 				className={cx(
 					css`
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index b4cfbd1..0cc6897 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -5,12 +5,14 @@ import RevealChildren from "./RevealChildren";
 import useMediaQuery from "../util/useMediaQuery";
 import { useNav } from "../util";
 
-const menu = [
-	{ name: "Home", link: "/" },
-	{ name: "Experience", link: "/experience" },
-	{ name: "Projects", link: "/projects" },
-	{ name: "Contact", link: "/contact" },
-];
+export const MENU = {
+	Home: "/",
+	Experience: "/experience",
+	Projects: "/projects",
+	Contact: "/contact",
+} as const;
+
+export const MenuEntries = Object.entries(MENU);
 
 const desktopNav = css`
 	float: right;
@@ -71,7 +73,7 @@ const Menu: React.FC<{
 	const mobile = useMediaQuery("(max-width: 50rem)");
 	const notmobile = !mobile;
 
-	const menuItems = menu.map(({ link, name }) => (
+	const menuItems = Object.entries(MENU).map(([name, link]) => (
 		<a key={link} onClick={navigate(link)} href={link}>
 			{name}
 		</a>
diff --git a/src/pages/main/Contact.tsx b/src/pages/main/Contact.tsx
index 86a7958..116fae1 100644
--- a/src/pages/main/Contact.tsx
+++ b/src/pages/main/Contact.tsx
@@ -77,8 +77,6 @@ const Home: React.FC = () => {
 
 	return (
 		<Container
-			end
-			next="/"
 			className={css`
 				min-height: 50vh;
 				display: flex;
diff --git a/src/pages/main/Exp.tsx b/src/pages/main/Exp.tsx
index e29079f..4199bde 100644
--- a/src/pages/main/Exp.tsx
+++ b/src/pages/main/Exp.tsx
@@ -159,7 +159,7 @@ const age = getAge("27 May 1995");
 
 const Exp: React.FC = () => {
 	return (
-		<Container next="/projects">
+		<Container>
 			<h2>
 				I’m a {age} year old developer from
 				<br />
diff --git a/src/pages/main/Home.tsx b/src/pages/main/Home.tsx
index 50dc58a..0764506 100644
--- a/src/pages/main/Home.tsx
+++ b/src/pages/main/Home.tsx
@@ -4,7 +4,7 @@ import Dashed from "../../components/Dashed";
 
 const Home: React.FC = () => {
 	return (
-		<Container next="/experience">
+		<Container>
 			<h1>MKRhere</h1>
 			<p>
 				Web home of <Dashed>designer</Dashed>, <Dashed>developer</Dashed>, and{" "}
diff --git a/src/pages/main/Projects.tsx b/src/pages/main/Projects.tsx
index b606782..1805244 100644
--- a/src/pages/main/Projects.tsx
+++ b/src/pages/main/Projects.tsx
@@ -146,7 +146,7 @@ const ProjectUnit: React.FC<Project> = ({
 
 const Exp: React.FC = () => {
 	return (
-		<Container next="/contact">
+		<Container>
 			<h2>What else have I built?</h2>
 			<p>Some tools, libraries, and apps over time:</p>
 			<div