I fixed the issue by setting z-index.
app.component.html
<calcite-shell>
<app-header slot="header" />
<app-panel-start slot="panel-start" />
<app-panel-end slot="panel-end" />
<app-panel-bottom slot="panel-bottom" />
<div id="mapViewNode"></div>
</calcite-shell>
app.component.scss
app-header {
position: relative;
z-index: 2;
}
app-panel-end {
position: relative;
z-index: 1;
}
header.component.scss
@media(max-width:520px) {
calcite-dropdown{
display: block;
}
calcite-menu{
display:none;
}
}
@media(min-width:520px) {
calcite-dropdown {
display: none;
}
calcite-menu {
display:block;
}
}