fix(header-sheet): auto close when click

src/components/layout/header/internal/HeaderDrawerButton.tsx

@@ -1,14 +1,11 @@
 'use client'
 
-import { atom } from 'jotai'
-
 import { PresentSheet } from '~/components/ui/sheet'
 import { useIsClient } from '~/hooks/common/use-is-client'
 
 import { HeaderActionButton } from './HeaderActionButton'
 import { HeaderDrawerContent } from './HeaderDrawerContent'
 
-export const drawerOpenAtom = atom(false)
 export const HeaderDrawerButton = () => {
   const isClient = useIsClient()
   const ButtonElement = (

src/components/layout/header/internal/HeaderDrawerContent.tsx

@@ -4,11 +4,10 @@ import { memo } from 'react'
 import { m } from 'framer-motion'
 import Link from 'next/link'
 
+import { useSheetContext } from '~/components/ui/sheet/context'
 import { reboundPreset } from '~/constants/spring'
-import { jotaiStore } from '~/lib/store'
 
 import { useHeaderConfig } from './HeaderDataConfigureProvider'
-import { drawerOpenAtom } from './HeaderDrawerButton'
 
 export const HeaderDrawerContent = () => {
   const { config } = useHeaderConfig()
@@ -55,19 +54,14 @@ export const HeaderDrawerContent = () => {
     </div>
   )
 }
-// @ts-ignore
+
 const LinkInternal: typeof Link = memo(function LinkInternal({
   children,
   ...rest
 }) {
+  const { dismiss } = useSheetContext()
   return (
-    <Link
-      {...rest}
-      prefetch={false}
-      onClick={() => {
-        jotaiStore.set(drawerOpenAtom, false)
-      }}
-    >
+    <Link {...rest} prefetch={false} onClick={dismiss}>
       {children}
     </Link>
   )

src/components/ui/sheet/Sheet.tsx

@@ -3,6 +3,8 @@ import { atom, useStore } from 'jotai'
 import { Drawer } from 'vaul'
 import type { FC, PropsWithChildren, ReactNode } from 'react'
 
+import { SheetContext } from './context'
+
 export interface PresentSheetProps {
   content: ReactNode | FC
   open?: boolean
@@ -94,11 +96,22 @@ export const PresentSheet: FC<PropsWithChildren<PresentSheetProps>> = (
             </Drawer.Title>
           )}
 
-          {React.isValidElement(content)
-            ? content
-            : typeof content === 'function'
-              ? React.createElement(content)
-              : null}
+          <SheetContext.Provider
+            value={useMemo(
+              () => ({
+                dismiss() {
+                  setIsOpen(false)
+                },
+              }),
+              [setIsOpen],
+            )}
+          >
+            {React.isValidElement(content)
+              ? content
+              : typeof content === 'function'
+                ? React.createElement(content)
+                : null}
+          </SheetContext.Provider>
           <div ref={setHolderRef} />
         </Drawer.Content>
         <Drawer.Overlay

src/components/ui/sheet/context.tsx

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react'
+
+interface SheetContextValue {
+  dismiss(): void
+}
+export const SheetContext = createContext<SheetContextValue>(null!)
+
+export const useSheetContext = () => useContext(SheetContext)