or

yarn add junkyard-ui

import { AppShell, useDrawerContext } from 'junkyard-ui'

<AppShell config={config}>{/* Your app code goes here */}</AppShell>

const {
  state: { anchor, content, isOpen, width, backdropClickClose },
  actions: {
    openDrawer,
    closeDrawer,
    setWidth,
    setContent,
    setAnchor,
    setBackdropClickClose,
  },
} = useDrawerContext()

import { Button } from '@mui/material'
import { AppShell, useDrawerContext } from 'junkyard-ui'

function MyComponent() {
  const {
    actions: { openDrawer },
  } = useDrawerContext()
  return (
    <Button onClick={() => openDrawer(<div>Hello, World!</div>)}>
      Open Drawer
    </Button>
  )
}

function MyApp() {
  return (
    <AppShell
      config={
        {
          /* your drawer config here */
        }
      }
    >
      <MyComponent />
    </AppShell>
  )
}