on Header component there is an toggle button , its visible on small screens only..
after click on its open a right modal..

<div class="
app-header-menu
app-header-mobile-drawer
align-items-stretch
" data-kt-drawer="true" data-kt-drawer-name="app-header-menu" data-kt-drawer-activate="{default: true, lg: false}"
data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="end"
data-kt-drawer-toggle="#kt_app_header_menu_toggle" data-kt-swapper="true"
data-kt-swapper-mode="{default: 'append', lg: 'prepend'}"
data-kt-swapper-parent="{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}">



the overlay not working as expected becouse of css z-index..
in DrawerComponent function _createOverlay will find the element and update the z-index css value to 109 but it's not rendered right

the problem exist after creating new project (demo 1) ... the online demo1 works

the the project not rendering the overlay


i fixed it in css file and change the z-index value to 1 , it will updated to 0 in _createOverlay function.. but i dont know if it is the right way and i dont know why in your online demo1 its works with the same css values