Close nav drawer on navigation

src/components/Header/NavDrawer/NavDrawer.tsx

@@ -1,13 +1,31 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import { usePathname, useSearchParams } from 'next/navigation';
 import styles from './NavDrawer.module.scss';
 import { FaBars } from 'react-icons/fa6';
 
 const NavDrawer = ({ children }: { children: React.ReactNode }) => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleClose = () => {
+    if (inputRef.current) {
+      inputRef.current.checked = false;
+    }
+  };
+
+  useEffect(() => {
+    handleClose();
+  }, [pathname, searchParams]);
+
   return (
     <div>
       <label htmlFor="drawer-toggle">
         <FaBars className={styles.toggle} />
       </label>
       <input
+        ref={inputRef}
         className={styles.checkbox}
         type="checkbox"
         id="drawer-toggle"