diff --git a/src/pages/blog/Home.tsx b/src/pages/blog/Home.tsx index ad581bf..0f797eb 100644 --- a/src/pages/blog/Home.tsx +++ b/src/pages/blog/Home.tsx @@ -1,6 +1,6 @@ import { css } from "@emotion/css"; import React, { useEffect, useState } from "react"; -import { Link, useLocation } from "react-router-dom"; +import { Link, useLocation, useNavigate } from "react-router-dom"; import { Spacer } from "../../components/Spacer"; import { ArticleSubHeader } from "./components/ArticleSubHeader"; import { BlogPost } from "./components/BlogContent"; @@ -59,6 +59,7 @@ const Header: React.FC = () => { const BlogHome: React.FC = () => { const location = useLocation(); + const navigate = useNavigate(); const isArticleOpen = Boolean(location.pathname.split("/blog")[1]); const [isAsideClosed, setAsideClosed] = useState(isArticleOpen); @@ -68,6 +69,17 @@ const BlogHome: React.FC = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isArticleOpen]); + useEffect(() => { + if (!isArticleOpen) return; + + const handler = (e: KeyboardEvent) => + e.key === "Escape" && navigate("/blog"); + + document.addEventListener("keydown", handler); + return () => document.removeEventListener("keydown", handler); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isArticleOpen]); + return (
{ min-height: 1rem; min-width: 1rem; cursor: pointer; + align-self: flex-end; `} />