feat: adds keyboard navigation

Author: valerio-pescatori

src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { type FlavorName, flavors } from '@catppuccin/palette';
-import { useLocation } from '@solidjs/router';
-import { Show } from 'solid-js';
+import { useLocation, useNavigate } from '@solidjs/router';
+import { Show, createEffect, onCleanup } from 'solid-js';
 import { useI18nContext } from '~/i18n/i18n-solid';
 import type { Locales } from '~/i18n/i18n-types';
 import { locales } from '~/i18n/i18n-util';
@@ -12,6 +12,7 @@ import { IconsEnum } from './Icon/types/IconsEnum';
 
 export default function Header() {
 	const { locale, setLocale } = useI18nContext();
+	const navigate = useNavigate();
 	const location = useLocation();
 
 	const switchLocale = async (newLocale: Locales) => {
@@ -29,6 +30,18 @@ export default function Header() {
 		}`;
 	};
 
+	createEffect(() => {
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === 'Backspace') navigate('/');
+		}
+
+		addEventListener('keydown', handleKeyDown);
+
+		onCleanup(() => {
+			removeEventListener('keydown', handleKeyDown);
+		});
+	});
+
 	return (
 		<header class="bg-mantle flex justify-end px-4 py-2">
 			<Show when={location.pathname !== '/'}>

src/routes/(home).tsx

@@ -1,4 +1,5 @@
-import { Show, createEffect, createSignal } from 'solid-js';
+import { useNavigate } from '@solidjs/router';
+import { Show, createEffect, createSignal, onCleanup } from 'solid-js';
 import Typewriter from '~/components/Typewriter/Typewriter';
 import { useI18nContext } from '~/i18n/i18n-solid';
 import type { Locales } from '~/i18n/i18n-types';
@@ -9,12 +10,35 @@ export default function Home() {
 	const [renderSub, setRenderSub] = createSignal(false);
 	const [renderList, setRenderList] = createSignal(false);
 	const isVisited = useIsVisited();
+	const navigate = useNavigate();
 
 	createEffect<Locales>((prevLocale) => {
 		if (prevLocale !== locale()) setRenderSub(false);
 		return locale();
 	});
 
+	createEffect(() => {
+		function handleKeyDown(e: KeyboardEvent) {
+			switch (e.key) {
+				case '1':
+					navigate('/whoami');
+					break;
+				case '2':
+					navigate('/contacts');
+					break;
+				case '3':
+					navigate('/thingsivedone');
+					break;
+			}
+		}
+
+		addEventListener('keydown', handleKeyDown);
+
+		onCleanup(() => {
+			removeEventListener('keydown', handleKeyDown);
+		});
+	});
+
 	return (
 		<div class="text-left mx-auto grid grid-rows-home-grid">
 			{/* Presentation */}