When using the polymer app-layout, I encountered an issue where the menu slides behind my buttons and leaflet map. Even when scrolling down, the content remains on top of the header. I attempted to resolve this by adjusting the z-index, but so far have been unsuccessful. This project utilizes TypeScript and Polymer 3.
nav-bar.ts
import { PolymerElement, html } from "@polymer/polymer";
import "@polymer/iron-icons/iron-icons.js";
import "@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";
import "@polymer/app-layout/app-drawer/app-drawer.js";
import "@polymer/app-layout/app-scroll-effects/app-scroll-effects.js";
import "@polymer/app-layout/app-header/app-header.js";
import "@polymer/app-layout/app-header-layout/app-header-layout.js";
import "@polymer/app-layout/app-toolbar/app-toolbar.js";
import "@vaadin/vaadin-button/vaadin-button.js";
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-checkbox/paper-checkbox.js';
import './my-app.js'
class NavBar extends PolymerElement {
static get template() {
return html`
<style>
app-header {
color: #fff;
background-color: #C62828;
--app-header-background-front-layer: {
background-position: 50% 10%;
};
}
[main-title] {
font-size: 2em;
}
</style>
<app-drawer-layout>
<app-drawer swipe-open slot="drawer">
<section>
<h2>app-header </h2>
<h2>app-header </h2>
</section>
</app-drawer>
<app-header-layout>
<app-header fixed="true" shadow="true" condenses="true"
slot="header">
<app-toolbar>
<paper-icon-button drawer-toggle>,
<iron-icon icon="search"></iron-icon></paper-icon-button>
<div condensed-title>Test</div>
</app-toolbar>
<app-toolbar></app-toolbar>
<app-toolbar>
<div main-title spacer>Test</div>
</app-toolbar>
</app-header>
</app-header-layout>
</app-drawer-layout>
<my-app appTitle="my app"></my-app>
`;
}}
customElements.define("nav-bar", NavBar);
Even if I copy-paste one of their demos from webcomponents.org app-layout, the problem persists. I also tried including this in my index.html with the same outcome:
<nav-bar></nav-bar>
<my-app></my-app>
This is how it currently appears:
scrolling - the button "Test" belongs to my-app rather than being a part of the header.
with the menu open - another example showing leaflet map and buttons.
Is there any way to modify this behavior so that the header and menu always remain as the topmost layer?