npm install vaul

`use client`
import React, {
  createContext,
  useContext,
  useState,
  useEffect,
  ReactNode,
} from 'react'
import { Drawer as VaulHeader } from 'vaul'
 
interface DrawerContextProps {
  open: boolean
  setOpen: (open: boolean) => void
}
 
const DrawerContext = createContext<DrawerContextProps | undefined>(undefined)
 
const useSidebarDrawer = () => {
  const context = useContext(DrawerContext)
  if (!context) {
    throw new Error('useDrawer must be used within a DrawerProvider')
  }
  return context
}
 
interface DrawerSidebarProps {
  children: ReactNode
  open?: boolean
  setOpen?: (open: boolean) => void
  drawerBtn?:any | null
}
 
export function HeaderDrawer({
  children,
  open: controlledOpen,
  setOpen: controlledSetOpen,
  drawerBtn
}: DrawerSidebarProps) {
  const [internalOpen, setInternalOpen] = useState(false)
  const open = controlledOpen !== undefined ? controlledOpen : internalOpen
  const setOpen =
    controlledSetOpen !== undefined ? controlledSetOpen : setInternalOpen
 
  const [isDesktop, setIsDesktop] = useState(false)
 
  useEffect(() => {
    const mediaQuery = window.matchMedia('(min-width: 768px)')
    const handleMediaChange = (event: MediaQueryListEvent) => {
      setIsDesktop(event.matches)
    }
 
    setIsDesktop(mediaQuery.matches)
    mediaQuery.addEventListener('change', handleMediaChange)
 
    return () => {
      mediaQuery.removeEventListener('change', handleMediaChange)
    }
  }, [])
console.log(drawerBtn);
 
  return (
    <DrawerContext.Provider value={{ open, setOpen }}>
      <>
        <VaulHeader.Root
          open={open}
          direction="top"
          onOpenChange={setOpen}
          dismissible={isDesktop ? false : true}
        >
          {drawerBtn &&
      <VaulHeader.Trigger asChild>
        {drawerBtn()}
      </VaulHeader.Trigger>
      }
          <VaulHeader.Portal>
            <VaulHeader.Overlay className="fixed inset-0 dark:bg-black/40 bg-white/50 backdrop-blur-sm z-50  " />
            <VaulHeader.Content className="dark:bg-gray-900 bg-white  border-b z-50 w-full h-fit py-3 fixed top-0 left-0">
              {children}
            </VaulHeader.Content>
          </VaulHeader.Portal>
        </VaulHeader.Root>
      </>
    </DrawerContext.Provider>
  )
}
 
export function DrawerContent({ children }: { children: ReactNode }) {
  return <>{children}</>
}
 

  const [sidebarOpen, setSidebarOpen] = useState(false)
  return (
    <>
        <HeaderDrawer
           open={headerOpen}
           setOpen={setHeaderOpen}
           drawerBtn={()=> { return <button><MenuIcon/></button>
           }}>
          <DrawerContent>
          </DrawerContent>
        </HeaderDrawer>
        )