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)