diff options
| -rw-r--r-- | src/components/organisms/toolbar/toolbar.tsx | 2 | ||||
| -rw-r--r-- | src/utils/hooks/use-route-change.tsx | 12 |
2 files changed, 14 insertions, 0 deletions
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; |