メニューのところにJoy UIのDrawerコンポーネントを実装しました。
ドキュメント
https://mui.com/joy-ui/react-drawer/
コード
https://github.com/subsonicsystems/nextjs_django_auth0_base_frontend/blob/main/components/layout.tsx
メニューを開くとデフォルトでは、背景にぼかしが入ります。
sxに‘& .MuiDrawer-backdrop’: { backdropFilter: ‘none’ }を指定すると、背景のぼかしをなくすことができます。
メニューの開閉速度は、–Drawer-transitionDurationで指定できます。
例では、開く速度を0.3s、閉じる速度を0にしています。
<Drawer
open={openMenu}
onClose={closeMenu}
size="sm"
sx={{
'& .MuiDrawer-backdrop': { backdropFilter: 'none' },
'--Drawer-transitionDuration': openMenu ? '0.3s' : 0,
}}
>
{/* your-code */}
</Drawer>