From d916fba0a54ca2ee89f1de1a4dcc0ee71a3a24c5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 19:00:40 +0200
Subject: chore: close search form when launching search

---
 src/components/organisms/toolbar/toolbar.tsx |  2 ++
 src/utils/hooks/use-route-change.tsx         | 12 ++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/utils/hooks/use-route-change.tsx

diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index e196c09..ee61a7b 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,4 +1,5 @@
 import useClickOutside from '@utils/hooks/use-click-outside';
+import useRouteChange from '@utils/hooks/use-route-change';
 import { FC, useRef, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
@@ -42,6 +43,7 @@ const Toolbar: FC<ToolbarProps> = ({
     settingsRef,
     () => isSettingsOpened && setIsSettingsOpened(false)
   );
+  useRouteChange(() => setIsSearchOpened(false));
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
diff --git a/src/utils/hooks/use-route-change.tsx b/src/utils/hooks/use-route-change.tsx
new file mode 100644
index 0000000..82e01a1
--- /dev/null
+++ b/src/utils/hooks/use-route-change.tsx
@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const useRouteChange = (callback: () => void) => {
+  const { events } = useRouter();
+
+  useEffect(() => {
+    events.on('routeChangeStart', callback);
+  }, [events, callback]);
+};
+
+export default useRouteChange;
-- 
cgit v1.2.3