diff --git a/src/components/layout/header/internal/HeaderDrawerButton.tsx b/src/components/layout/header/internal/HeaderDrawerButton.tsx
index 1e341686db..2004821b90 100644
--- a/src/components/layout/header/internal/HeaderDrawerButton.tsx
+++ b/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 = (
diff --git a/src/components/layout/header/internal/HeaderDrawerContent.tsx b/src/components/layout/header/internal/HeaderDrawerContent.tsx
index 6114cc50b9..a770bba5f2 100644
--- a/src/components/layout/header/internal/HeaderDrawerContent.tsx
+++ b/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 = () => {
)
}
-// @ts-ignore
+
const LinkInternal: typeof Link = memo(function LinkInternal({
children,
...rest
}) {
+ const { dismiss } = useSheetContext()
return (
- {
- jotaiStore.set(drawerOpenAtom, false)
- }}
- >
+
{children}
)
diff --git a/src/components/ui/sheet/Sheet.tsx b/src/components/ui/sheet/Sheet.tsx
index 54b1c08a73..430f970ab9 100644
--- a/src/components/ui/sheet/Sheet.tsx
+++ b/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> = (
)}
- {React.isValidElement(content)
- ? content
- : typeof content === 'function'
- ? React.createElement(content)
- : null}
+ ({
+ dismiss() {
+ setIsOpen(false)
+ },
+ }),
+ [setIsOpen],
+ )}
+ >
+ {React.isValidElement(content)
+ ? content
+ : typeof content === 'function'
+ ? React.createElement(content)
+ : null}
+
(null!)
+
+export const useSheetContext = () => useContext(SheetContext)