Hello everyone! Having some trouble with the App Layout not showing the hamburger icon, I believe i’ve imported all the correct @vaadin/ components. Here is my LitElement code.
Rebuilt my webpack config from scratch just to rule out everything, however, this hamburger icon refuses to show up. Maybe i’m missing a particular component import statement.
HTML – calling my custom component
index.html :
<body>
<bootstrap-nav></bootstrap-nav>
<h1><%= htmlWebpackPlugin.options.title %></h1>
</body>
bootstrap-nav.js:
import { html, LitElement } from 'lit-element';
import { navViewStyles } from '../styles/base-styles';
import '@vaadin/vaadin-app-layout';
import '@vaadin/vaadin-tabs';
import '@vaadin/vaadin-icons';
import '@vaadin/vaadin-button';
class BootstrapNav extends LitElement{
//static get styles() {
// return [ navViewStyles]
//}
render() {
return html`
<custom-style>
<style include="lumo-typography lumo-color">
</style>
</custom-style>
<style>
iron-icon {
padding: 0.25em;
width: var(--lumo-icon-size-s);
height: var(--lumo-icon-size-s);
}
</style>
<vaadin-app-layout>
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<h2 slot="navbar">App Name</h2>
<vaadin-tabs orientation="vertical" slot="drawer">
<vaadin-tab>
<a href="/">
<iron-icon icon="vaadin:home"></iron-icon>
Page 1
</a>
</vaadin-tab>
<vaadin-tab>
<a href="page2">
<iron-icon icon="vaadin:list"></iron-icon>
Page 2
</a>
</vaadin-tab>
<vaadin-tab>
<a href="page3">
<iron-icon icon="vaadin:options"></iron-icon>
Page 3
</a>
</vaadin-tab>
</vaadin-tabs>
<slot></slot>
</vaadin-app-layout>
`
}
}
customElements.define('bootstrap-nav',BootstrapNav);