Drawer.tsx

import React, { useState, lazy, Suspense } from 'react';

import IconButton from '@material-ui/core/IconButton';
import SettingsIcon from '@material-ui/icons/Settings';

const SettingDrawer = lazy(() => import('./SettingDrawer'));

// import SettingDrawer from './SettingDrawer'

/**
 * Header Setting
 * 
 * @interface
 */
interface HeaderSettingProps {

}

const HeaderSetting = () => {
    const [drawerState, setDrawerState] = useState<boolean>(false);

    const toggleDrawer = (
        event: React.KeyboardEvent | React.MouseEvent,
    ) => {
        event.stopPropagation();
        if (
            event.type === 'keydown' &&
            ((event as React.KeyboardEvent).key === 'Tab' ||
                (event as React.KeyboardEvent).key === 'Shift')
        ) {
            return;
        }

        setDrawerState(!drawerState);
    };

    const drawerIconId = 'setting-drawer-icon';

    return (
        <>
            <IconButton
                edge="end"
                aria-label="Setting of current user"
                aria-controls={drawerIconId}
                aria-haspopup="true"
                onClick={toggleDrawer}
            >
                <SettingsIcon />
                {/* <SettingDrawer open={drawerState} toggleDrawer={toggleDrawer} /> */}
                <Suspense fallback="">
                    <SettingDrawer open={drawerState} toggleDrawer={toggleDrawer} />
                </Suspense>
            </IconButton>
        </>
    )
}