fix: navigation close on escape

Frontlive · Mar 24, 2024 · 5ccfff0 · 5ccfff0
1 parent 357cd6c
commit 5ccfff0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/apps/web/src/components/inc/navigation/MobileNavigation.tsx b/apps/web/src/components/inc/navigation/MobileNavigation.tsx
@@ -1,18 +1,24 @@
 'use client';
 
 import Image from 'next/image';
-import { DialogContent, DialogDescription, DialogRoot, DialogTitle, DialogTrigger } from '../../ui/Dialog';
+import {
+	DialogContent,
+	DialogDescription,
+	DialogRoot,
+	DialogTitle,
+	DialogTrigger,
+} from '../../ui/Dialog';
 import Hamburger from '../../../assets/images/hamburger.svg';
 import { useMobileNavigation } from './useMobileNavigation';
 import { VisuallyHidden } from '../../ui/VisuallyHidden';
 import Link from 'next/link';
 import { links } from './links';
 
 export const MobileNavigation = () => {
-	const { isOpen, open, close } = useMobileNavigation();
+	const { isOpen, open, close, toggle } = useMobileNavigation();
 
 	return (
-		<DialogRoot isOpen={isOpen}>
+		<DialogRoot isOpen={isOpen} onOpenChange={toggle}>
 			<DialogTrigger>
 				<button type="button" className="a11y-button rounded-sm" onClick={open}>
 					<Image src={Hamburger} alt="open navigation" />

diff --git a/apps/web/src/components/inc/navigation/useMobileNavigation.ts b/apps/web/src/components/inc/navigation/useMobileNavigation.ts
@@ -1,7 +1,7 @@
 import { useBoolean } from '@/hooks/useBoolean';
 
 export const useMobileNavigation = () => {
-	const { state, setTrue, setFalse } = useBoolean();
+	const { state, setTrue, setFalse, toggle } = useBoolean();
 
 	const open = () => {
 		setTrue();
@@ -15,5 +15,6 @@ export const useMobileNavigation = () => {
 		isOpen: state,
 		open,
 		close,
+		toggle,
 	};
 };
diff --git a/apps/web/src/components/ui/Dialog.tsx b/apps/web/src/components/ui/Dialog.tsx
@@ -1,15 +1,22 @@
-'use client';
-
 import * as RadixDialog from '@radix-ui/react-dialog';
 import type { ReactNode } from 'react';
 
 type DialogRootProps = {
 	isOpen: boolean;
+	onOpenChange: (state: boolean) => void;
 	children: ReactNode;
 };
 
-export const DialogRoot = ({ isOpen, children }: DialogRootProps) => {
-	return <RadixDialog.Root open={isOpen}>{children}</RadixDialog.Root>;
+export const DialogRoot = ({
+	isOpen,
+	onOpenChange,
+	children,
+}: DialogRootProps) => {
+	return (
+		<RadixDialog.Root open={isOpen} onOpenChange={onOpenChange}>
+			{children}
+		</RadixDialog.Root>
+	);
 };
 
 type DialogTriggerProps = {