Add handler for closing drawer easily

marshallku · Feb 11, 2024 · 30d5d44 · 30d5d44
1 parent 71183c6
commit 30d5d44
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/apps/blog/src/components/DrawerContent/index.tsx b/apps/blog/src/components/DrawerContent/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { Dispatch, SetStateAction, useCallback, useRef } from "react";
+import { Dispatch, MouseEventHandler, SetStateAction, useCallback, useRef } from "react";
 import { Icon, IconProps } from "@marshallku/icon";
 import { classNames } from "@marshallku/utils";
 import Hamburger from "#components/Hamburger";
@@ -24,6 +24,12 @@ function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerC
         setWillClose(true);
     }, [closeDrawer, setWillClose]);
 
+    const handleClick: MouseEventHandler<HTMLDivElement> = useCallback((e) => {
+        if (e.target === containerRef.current) {
+            close();
+        }
+    }, [close]);
+
     const List = useCallback(
         ({
             icon,
@@ -47,7 +53,7 @@ function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerC
     );
 
     return (
-        <div className={cx("", opened && "--opened", willClose && "--close")} ref={containerRef}>
+        <div className={cx("", opened && "--opened", willClose && "--close")} ref={containerRef} onClick={handleClick}>
             <Hamburger onClick={close} opened={!willClose} className={cx("__hamburger")} />
             <nav className={cx("__nav")}>
                 <ul className={cx("__item")}>